diff --git a/src/ol/style/regularshape.js b/src/ol/style/regularshape.js index 0303dc86a4..92bcbd4c29 100644 --- a/src/ol/style/regularshape.js +++ b/src/ol/style/regularshape.js @@ -322,7 +322,11 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) { var strokeWidth = 0; if (this.stroke_) { - strokeStyle = ol.colorlike.asColorLike(this.stroke_.getColor()); + strokeStyle = this.stroke_.getColor(); + if (strokeStyle === null) { + strokeStyle = ol.render.canvas.defaultStrokeStyle; + } + strokeStyle = ol.colorlike.asColorLike(strokeStyle); strokeWidth = this.stroke_.getWidth(); if (strokeWidth === undefined) { strokeWidth = ol.render.canvas.defaultLineWidth; @@ -442,7 +446,11 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) { if (this.fill_) { - context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor()); + var color = this.fill_.getColor(); + if (color === null) { + color = ol.render.canvas.defaultFillStyle; + } + context.fillStyle = ol.colorlike.asColorLike(color); context.fill(); } if (this.stroke_) { diff --git a/test_rendering/spec/ol/style/expected/regularshape-canvas-default-style.png b/test_rendering/spec/ol/style/expected/regularshape-canvas-default-style.png new file mode 100644 index 0000000000..51e191f943 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-canvas-default-style.png differ diff --git a/test_rendering/spec/ol/style/expected/regularshape-webgl-default-style.png b/test_rendering/spec/ol/style/expected/regularshape-webgl-default-style.png new file mode 100644 index 0000000000..fd18fd9708 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-webgl-default-style.png differ diff --git a/test_rendering/spec/ol/style/regularshape.test.js b/test_rendering/spec/ol/style/regularshape.test.js index e9e005c455..595421301d 100644 --- a/test_rendering/spec/ol/style/regularshape.test.js +++ b/test_rendering/spec/ol/style/regularshape.test.js @@ -37,93 +37,115 @@ describe('ol.rendering.style.RegularShape', function() { return map; } + function createFeatures(stroke, fill) { + + var feature; + feature = new ol.Feature({ + geometry: new ol.geom.Point([-15, 15]) + }); + // square + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + angle: Math.PI / 4 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([8, 15]) + }); + // triangle + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 3, + radius: 10, + rotation: Math.PI / 4, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-10, -8]) + }); + // star + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 5, + radius: 10, + radius2: 4, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([12, -8]) + }); + // cross + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + radius2: 0, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + } + + describe('#render', function() { + var stroke = new ol.style.Stroke({width: 2}); + var fill = new ol.style.Fill({color: 'red'}); + afterEach(function() { disposeMap(map); }); - function createFeatures() { - var stroke = new ol.style.Stroke({color: 'black', width: 2}); - var fill = new ol.style.Fill({color: 'red'}); - - var feature; - feature = new ol.Feature({ - geometry: new ol.geom.Point([-15, 15]) - }); - // square - feature.setStyle(new ol.style.Style({ - image: new ol.style.RegularShape({ - fill: fill, - stroke: stroke, - points: 4, - radius: 10, - angle: Math.PI / 4 - }) - })); - vectorSource.addFeature(feature); - - feature = new ol.Feature({ - geometry: new ol.geom.Point([8, 15]) - }); - // triangle - feature.setStyle(new ol.style.Style({ - image: new ol.style.RegularShape({ - fill: fill, - stroke: stroke, - points: 3, - radius: 10, - rotation: Math.PI / 4, - angle: 0 - }) - })); - vectorSource.addFeature(feature); - - feature = new ol.Feature({ - geometry: new ol.geom.Point([-10, -8]) - }); - // star - feature.setStyle(new ol.style.Style({ - image: new ol.style.RegularShape({ - fill: fill, - stroke: stroke, - points: 5, - radius: 10, - radius2: 4, - angle: 0 - }) - })); - vectorSource.addFeature(feature); - - feature = new ol.Feature({ - geometry: new ol.geom.Point([12, -8]) - }); - // cross - feature.setStyle(new ol.style.Style({ - image: new ol.style.RegularShape({ - fill: fill, - stroke: stroke, - points: 4, - radius: 10, - radius2: 0, - angle: 0 - }) - })); - vectorSource.addFeature(feature); - } - it('tests the canvas renderer', function(done) { map = createMap('canvas'); - createFeatures(); - expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png', - 9.4, done); + createFeatures(stroke, fill); + expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png', 9.4, done); }); it('tests the WebGL renderer', function(done) { assertWebGL(); map = createMap('webgl'); - createFeatures(); - expectResemble(map, 'spec/ol/style/expected/regularshape-webgl.png', - 8.2, done); + createFeatures(stroke, fill); + expectResemble(map, 'spec/ol/style/expected/regularshape-webgl.png', 8.2, done); + }); + }); + + describe('uses the default fill and stroke color', function() { + var stroke = new ol.style.Stroke(); + var fill = new ol.style.Fill(); + + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(stroke, fill); + expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + createFeatures(stroke, fill); + expectResemble(map, 'spec/ol/style/expected/regularshape-webgl-default-style.png', 3.0, done); }); }); });