ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Port render-toContext rendering test

Browse Source
This commit is contained in:
Frederic Junod
2018-11-14 17:49:23 +01:00
parent 50ae34fcc6
commit 6e964c7934
12 changed files with 96 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -10,7 +10,7 @@
"private": true, "private": true,
"homepage": "https://openlayers.org/", "homepage": "https://openlayers.org/",
"scripts": { "scripts": {
"lint": "eslint tasks test src/ol examples config", "lint": "eslint tasks test rendering src/ol examples config",
"pretest": "npm run lint", "pretest": "npm run lint",
"test-rendering": "node rendering/test.js", "test-rendering": "node rendering/test.js",
"test": "npm run karma -- --single-run --log-level error && npm run test-rendering -- --force", "test": "npm run karma -- --single-run --log-level error && npm run test-rendering -- --force",
rendering/cases/render-toContext/expected.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

rendering/cases/render-toContext/index.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</script>
</html>
rendering/cases/render-toContext/main.js
+77
View File
@@ -0,0 +1,77 @@
import LineString from '../../../src/ol/geom/LineString.js';
import Point from '../../../src/ol/geom/Point.js';
import Polygon from '../../../src/ol/geom/Polygon.js';
import {toContext} from '../../../src/ol/render.js';
import CircleStyle from '../../../src/ol/style/Circle.js';
import Fill from '../../../src/ol/style/Fill.js';
import Stroke from '../../../src/ol/style/Stroke.js';
import Style from '../../../src/ol/style/Style.js';
const canvas = document.getElementById('canvas');
const vectorContext = toContext(canvas.getContext('2d'), {
pixelRatio: 1,
size: [200, 200]
});
vectorContext.setStyle(new Style({
image: new CircleStyle({
fill: new Fill({
color: 'green'
}),
radius: 10
})
}));
vectorContext.drawGeometry(new Point([100, 100]));
vectorContext.setStyle(new Style({
stroke: new Stroke({
lineCap: 'butt',
color: 'red',
width: 14
})
}));
vectorContext.drawGeometry(new LineString([
[10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
]));
vectorContext.setStyle(new Style({
stroke: new Stroke({
lineJoin: 'bevel',
lineCap: 'butt',
color: '#111',
width: 14
})
}));
vectorContext.drawGeometry(new LineString([
[10, 140], [30, 120], [50, 140], [70, 120], [90, 140]
]));
vectorContext.setStyle(new Style({
stroke: new Stroke({
color: 'blue',
width: 6
}),
fill: new Fill({
color: 'rgba(0,0,255,0.5)'
})
}));
vectorContext.drawGeometry(new Polygon([
[[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]],
[[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]]
]));
vectorContext.setStyle(new Style({
stroke: new Stroke({
lineDash: [10, 5],
lineDashOffset: 5
})
}));
vectorContext.drawGeometry(new Polygon([
[[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]],
[[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]]
]));
render();
test/rendering/ol/expected/render-linestring-bevel.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 950 B

test/rendering/ol/expected/render-linestring-butt.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 873 B

test/rendering/ol/expected/render-linestring.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 966 B

test/rendering/ol/expected/render-point.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 717 B

test/rendering/ol/expected/render-polygon-linedash.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 396 B

test/rendering/ol/expected/render-polygon-linedashoffset.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 403 B

test/rendering/ol/expected/render-polygon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 792 B

test/rendering/ol/render.test.js
-209
View File
@@ -1,209 +0,0 @@
import LineString from '../../../src/ol/geom/LineString.js';
import Point from '../../../src/ol/geom/Point.js';
import Polygon from '../../../src/ol/geom/Polygon.js';
import {toContext} from '../../../src/ol/render.js';
import VectorContext from '../../../src/ol/render/VectorContext.js';
import CanvasImmediateRenderer from '../../../src/ol/render/canvas/Immediate.js';
import CircleStyle from '../../../src/ol/style/Circle.js';
import Fill from '../../../src/ol/style/Fill.js';
import Stroke from '../../../src/ol/style/Stroke.js';
import Style from '../../../src/ol/style/Style.js';
function getContext() {
return document.createElement('canvas').getContext('2d');
}
describe('ol.render', function() {
describe('ol.render.toContext()', function() {
it('creates a vector context from a Canvas 2d context', function() {
const vectorContext = toContext(getContext(), {
pixelRatio: 1,
size: [100, 100]
});
expect(vectorContext).to.be.a(VectorContext);
expect(vectorContext).to.be.a(CanvasImmediateRenderer);
});
it('can be used to render a point geometry', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
image: new CircleStyle({
fill: new Fill({
color: 'green'
}),
radius: 10
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new Point([50, 50]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-point.png', IMAGE_TOLERANCE, done);
});
it('can be used to render a linestring geometry', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
color: 'red',
width: 14
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new LineString([
[10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-linestring.png', IMAGE_TOLERANCE, done);
});
it('respects lineCap for linestring', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
lineCap: 'butt',
color: 'red',
width: 14
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new LineString([
[10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-linestring-butt.png', IMAGE_TOLERANCE, done);
});
it('respects lineJoin for linestring', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
lineJoin: 'bevel',
color: 'red',
width: 14
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new LineString([
[10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-linestring-bevel.png', IMAGE_TOLERANCE, done);
});
it('can be used to render a polygon geometry', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
color: 'blue',
width: 8
}),
fill: new Fill({
color: 'rgba(0,0,255,0.5)'
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new Polygon([
[[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
[[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-polygon.png', IMAGE_TOLERANCE, done);
});
it('supports lineDash styles', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
lineDash: [10, 5]
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new Polygon([
[[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
[[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-polygon-linedash.png', IMAGE_TOLERANCE, done);
});
it('supports lineDashOffset', function(done) {
const context = getContext();
const vectorContext = toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
const style = new Style({
stroke: new Stroke({
lineDash: [10, 5],
lineDashOffset: 5
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new Polygon([
[[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
[[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
]));
resembleCanvas(context.canvas,
'rendering/ol/expected/render-polygon-linedashoffset.png', IMAGE_TOLERANCE, done);
});
});
});