Merge pull request #7042 from gkresic/lineDashOffset

Line dash offset

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;

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();
   }

src/ol/typedefs.js

@@ -79,6 +79,7 @@ ol.CanvasFunctionType;
 /**
  * @typedef {{lineCap: string,
  *            lineDash: Array.<number>,
+ *            lineDashOffset: number,
  *            lineJoin: string,
  *            lineWidth: number,
  *            miterLimit: number,

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);
+
+    });
+
   });
 
 });

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');