diff --git a/src/ol/render/canvas/immediate.js b/src/ol/render/canvas/immediate.js index bcf72367f7..a54503a9a6 100644 --- a/src/ol/render/canvas/immediate.js +++ b/src/ol/render/canvas/immediate.js @@ -735,6 +735,7 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta context.lineCap = strokeState.lineCap; if (ol.has.CANVAS_LINE_DASH) { context.setLineDash(strokeState.lineDash); + context.lineDashOffset = strokeState.lineDashOffset; } context.lineJoin = strokeState.lineJoin; context.lineWidth = strokeState.lineWidth; @@ -743,6 +744,7 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta this.contextStrokeState_ = { lineCap: strokeState.lineCap, lineDash: strokeState.lineDash, + lineDashOffset: strokeState.lineDashOffset, lineJoin: strokeState.lineJoin, lineWidth: strokeState.lineWidth, miterLimit: strokeState.miterLimit, @@ -757,6 +759,10 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta contextStrokeState.lineDash, strokeState.lineDash)) { context.setLineDash(contextStrokeState.lineDash = strokeState.lineDash); } + if (contextStrokeState.lineDashOffset != strokeState.lineDashOffset) { + contextStrokeState.lineDashOffset = context.lineDashOffset = + strokeState.lineDashOffset; + } } if (contextStrokeState.lineJoin != strokeState.lineJoin) { contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin; diff --git a/src/ol/style/regularshape.js b/src/ol/style/regularshape.js index 4a992a4daa..08f0a80e36 100644 --- a/src/ol/style/regularshape.js +++ b/src/ol/style/regularshape.js @@ -317,6 +317,7 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) { var lineJoin = ''; var miterLimit = 0; var lineDash = null; + var lineDashOffset = 0; var strokeStyle; var strokeWidth = 0; @@ -331,8 +332,10 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) { strokeWidth = ol.render.canvas.defaultLineWidth; } lineDash = this.stroke_.getLineDash(); + lineDashOffset = this.stroke_.getLineDashOffset(); if (!ol.has.CANVAS_LINE_DASH) { lineDash = null; + lineDashOffset = 0; } lineJoin = this.stroke_.getLineJoin(); if (lineJoin === undefined) { @@ -357,6 +360,7 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) { size: size, lineCap: lineCap, lineDash: lineDash, + lineDashOffset: lineDashOffset, lineJoin: lineJoin, miterLimit: miterLimit }; @@ -460,6 +464,7 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) { context.lineWidth = renderOptions.strokeWidth; if (renderOptions.lineDash) { context.setLineDash(renderOptions.lineDash); + context.lineDashOffset = renderOptions.lineDashOffset; } context.lineCap = renderOptions.lineCap; context.lineJoin = renderOptions.lineJoin; @@ -533,6 +538,7 @@ ol.style.RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions context.lineWidth = renderOptions.strokeWidth; if (renderOptions.lineDash) { context.setLineDash(renderOptions.lineDash); + context.lineDashOffset = renderOptions.lineDashOffset; } context.stroke(); } diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index 8581394c33..d9300c5912 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -79,6 +79,7 @@ ol.CanvasFunctionType; /** * @typedef {{lineCap: string, * lineDash: Array., + * lineDashOffset: number, * lineJoin: string, * lineWidth: number, * miterLimit: number, diff --git a/test_rendering/spec/ol/expected/render-polygon-linedash.png b/test_rendering/spec/ol/expected/render-polygon-linedash.png new file mode 100644 index 0000000000..73ca5f7402 Binary files /dev/null and b/test_rendering/spec/ol/expected/render-polygon-linedash.png differ diff --git a/test_rendering/spec/ol/expected/render-polygon-linedashoffset.png b/test_rendering/spec/ol/expected/render-polygon-linedashoffset.png new file mode 100644 index 0000000000..c9c9f1b3de Binary files /dev/null and b/test_rendering/spec/ol/expected/render-polygon-linedashoffset.png differ diff --git a/test_rendering/spec/ol/render.test.js b/test_rendering/spec/ol/render.test.js index 1c2796512d..b9d5c1d583 100644 --- a/test_rendering/spec/ol/render.test.js +++ b/test_rendering/spec/ol/render.test.js @@ -135,6 +135,49 @@ describe('ol.render', function() { }); + it('supports lineDash styles', function(done) { + var vectorContext = ol.render.toContext(context, {size: [100, 100]}); + + var style = new ol.style.Style({ + stroke: new ol.style.Stroke({ + lineDash: [10, 5] + }) + }); + + vectorContext.setStyle(style); + + vectorContext.drawGeometry(new ol.geom.Polygon([ + [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]], + [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]] + ])); + + resembleCanvas(context.canvas, + 'spec/ol/expected/render-polygon-linedash.png', IMAGE_TOLERANCE, done); + + }); + + it('supports lineDashOffset', function(done) { + var vectorContext = ol.render.toContext(context, {size: [100, 100]}); + + var style = new ol.style.Style({ + stroke: new ol.style.Stroke({ + lineDash: [10, 5], + lineDashOffset: 5 + }) + }); + + vectorContext.setStyle(style); + + vectorContext.drawGeometry(new ol.geom.Polygon([ + [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]], + [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]] + ])); + + resembleCanvas(context.canvas, + 'spec/ol/expected/render-polygon-linedashoffset.png', IMAGE_TOLERANCE, done); + + }); + }); }); diff --git a/test_rendering/spec/ol/style/expected/regularshape-canvas-linedash.png b/test_rendering/spec/ol/style/expected/regularshape-canvas-linedash.png new file mode 100644 index 0000000000..b0d7f51993 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-canvas-linedash.png differ diff --git a/test_rendering/spec/ol/style/expected/regularshape-canvas-linedashoffset.png b/test_rendering/spec/ol/style/expected/regularshape-canvas-linedashoffset.png new file mode 100644 index 0000000000..3723123e3d Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-canvas-linedashoffset.png differ diff --git a/test_rendering/spec/ol/style/regularshape.test.js b/test_rendering/spec/ol/style/regularshape.test.js index 595421301d..5f65b15f69 100644 --- a/test_rendering/spec/ol/style/regularshape.test.js +++ b/test_rendering/spec/ol/style/regularshape.test.js @@ -119,6 +119,23 @@ describe('ol.rendering.style.RegularShape', function() { expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png', 9.4, done); }); + it('supports lineDash', function(done) { + map = createMap('canvas'); + createFeatures(new ol.style.Stroke({ + lineDash: [10, 5] + })); + expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedash.png', 5, done); + }); + + it('supports lineDashOffset', function(done) { + map = createMap('canvas'); + createFeatures(new ol.style.Stroke({ + lineDash: [10, 5], + lineDashOffset: 5 + })); + expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedashoffset.png', 5, done); + }); + it('tests the WebGL renderer', function(done) { assertWebGL(); map = createMap('webgl');