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

Additional tests and code comments

Browse Source
This commit is contained in:
Andreas Hocevar
2016-04-28 16:29:29 +02:00
parent 3c37ce3990
commit 5d8b99ab10
4 changed files with 145 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/ol/render/canvas/canvasreplay.js
View File

@@ -266,6 +266,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
var prevX, prevY, roundX, roundY;
var pendingFill = 0;
var pendingStroke = 0;
// When the batch size gets too big, performance decreases. 200 is a good
// balance between batch size and number of fill/stroke instructions.
var batchSize =
this.instructions != instructions || this.overlaps ? 0 : 200;
while (i < ii) {
@@ -1267,8 +1269,6 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCo
closePathInstruction);
offset = end;
}
// FIXME is it quicker to fill and stroke each polygon individually,
// FIXME or all polygons together?
var fillInstruction = [ol.render.canvas.Instruction.FILL];
this.hitDetectionInstructions.push(fillInstruction);
if (state.fillStyle !== undefined) {

6
test/spec/ol/renderer/canvas/canvasreplay.test.js
View File

@@ -46,9 +46,9 @@ describe('ol.render.canvas.ReplayGroup', function() {
closePath: function() {},
setLineDash: function() {},
restore: function() {}
}
};
})
});
it('batches fill and stroke instructions for same style', function() {
ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
@@ -126,7 +126,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
expect(fillCount).to.be(3);
expect(strokeCount).to.be(3);
expect(beginPathCount).to.be(3);
})
});
});
});

BIN
test_rendering/spec/ol/layer/expected/vector-canvas-stroke.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

141
test_rendering/spec/ol/layer/vector.test.js
View File

@@ -37,6 +37,16 @@ describe('ol.rendering.layer.Vector', function() {
])));
}
function addLineString(r) {
source.addFeature(new ol.Feature(new ol.geom.LineString([
[center[0] - r, center[1] - r],
[center[0] + r, center[1] - r],
[center[0] + r, center[1] + r],
[center[0] - r, center[1] + r],
[center[0] - r, center[1] - r]
])));
}
describe('vector layer', function() {
beforeEach(function() {
@@ -96,9 +106,136 @@ describe('ol.rendering.layer.Vector', function() {
map.once('postrender', function() {
expectResemble(map, 'spec/ol/layer/expected/vector-canvas-opaque.png',
17, done);
})
});
});
it('renders stroke batches correctly with the canvas renderer', function(done) {
map = createMap('canvas');
source = new ol.source.Vector({
overlaps: false
});
addLineString(100);
addLineString(250);
addLineString(600);
addLineString(720);
map.addLayer(new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
})
})
}));
map.once('postrender', function() {
expectResemble(map, 'spec/ol/layer/expected/vector-canvas-stroke.png',
7, done);
});
});
it('interrupts fill/stroke batches correctly with the canvas renderer', function(done) {
map = createMap('canvas');
var color;
function createSource(overlaps) {
color = '#3399CC';
source = new ol.source.Vector({
overlaps: overlaps
});
addPolygon(720);
addPolygon(600);
addCircle(500);
addPolygon(250);
addCircle(200);
addPolygon(100);
return source;
}
function alternateColor() {
if (color == '#3399CC') {
color = '#CC9933';
} else {
color = '#3399CC';
}
return color;
}
var layer = new ol.layer.Vector({
source: createSource(true),
style: function(feature) {
alternateColor();
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: alternateColor(),
width: 1.25
}),
fill: new ol.style.Fill({
color: alternateColor()
})
});
}
});
map.addLayer(layer);
map.once('postrender', function() {
var canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be exactly the same as with `overlaps: true`
map.once('postrender', function() {
expectResemble(map, referenceImage, 0, done);
});
});
});
it('interrupts stroke batches correctly with the canvas renderer', function(done) {
map = createMap('canvas');
var color;
function createSource(overlaps) {
color = '#3399CC';
source = new ol.source.Vector({
overlaps: overlaps
});
addLineString(720);
addLineString(600);
addLineString(250);
addLineString(100);
return source;
}
function alternateColor() {
if (color == '#3399CC') {
color = '#CC9933';
} else {
color = '#3399CC';
}
return color;
}
var layer = new ol.layer.Vector({
source: createSource(true),
style: function(feature) {
alternateColor();
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: alternateColor(),
width: 1.25
}),
fill: new ol.style.Fill({
color: alternateColor()
})
});
}
});
map.addLayer(layer);
map.once('postrender', function() {
var canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be exactly the same as with `overlaps: true`
map.once('postrender', function() {
expectResemble(map, referenceImage, 0, done);
});
});
});
});
});
@@ -107,8 +244,10 @@ goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.Feature');
goog.require('ol.geom.Circle');
goog.require('ol.geom.LineString');
goog.require('ol.geom.Polygon');
goog.require('ol.layer.Vector');
goog.require('ol.source.Vector');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');