Merge pull request #6091 from tchandelle/linedash

Apply pixelRatio to line dash

src/ol/render/canvas/linestringreplay.js

@@ -129,7 +129,7 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
     }
     this.instructions.push([
       ol.render.canvas.Instruction.SET_STROKE_STYLE,
-      strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash
+      strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
     ], [
       ol.render.canvas.Instruction.BEGIN_PATH
     ]);
@@ -159,7 +159,7 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.SET_STROKE_STYLE,
     state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-    state.miterLimit, state.lineDash
+    state.miterLimit, state.lineDash, true, 1
   ], [
     ol.render.canvas.Instruction.BEGIN_PATH
   ]);
@@ -187,7 +187,7 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.SET_STROKE_STYLE,
     state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-    state.miterLimit, state.lineDash
+    state.miterLimit, state.lineDash, true, 1
   ], [
     ol.render.canvas.Instruction.BEGIN_PATH
   ]);

src/ol/render/canvas/polygonreplay.js

@@ -1,6 +1,7 @@
 goog.provide('ol.render.canvas.PolygonReplay');
 
 goog.require('ol');
+goog.require('ol.array');
 goog.require('ol.color');
 goog.require('ol.colorlike');
 goog.require('ol.extent');
@@ -143,7 +144,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f
     this.hitDetectionInstructions.push([
       ol.render.canvas.Instruction.SET_STROKE_STYLE,
       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash
+      state.miterLimit, state.lineDash, true, 1
     ]);
   }
   var flatCoordinates = circleGeometry.getFlatCoordinates();
@@ -195,7 +196,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry,
     this.hitDetectionInstructions.push([
       ol.render.canvas.Instruction.SET_STROKE_STYLE,
       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash
+      state.miterLimit, state.lineDash, true, 1
     ]);
   }
   var ends = polygonGeometry.getEnds();
@@ -232,7 +233,7 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo
     this.hitDetectionInstructions.push([
       ol.render.canvas.Instruction.SET_STROKE_STYLE,
       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash
+      state.miterLimit, state.lineDash, true, 1
     ]);
   }
   var endss = multiPolygonGeometry.getEndss();
@@ -367,13 +368,13 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
         'miterLimit should be defined');
     if (state.currentStrokeStyle != strokeStyle ||
         state.currentLineCap != lineCap ||
-        state.currentLineDash != lineDash ||
+        !ol.array.equals(state.currentLineDash, lineDash) ||
         state.currentLineJoin != lineJoin ||
         state.currentLineWidth != lineWidth ||
         state.currentMiterLimit != miterLimit) {
       this.instructions.push([
         ol.render.canvas.Instruction.SET_STROKE_STYLE,
-        strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash
+        strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
       ]);
       state.currentStrokeStyle = strokeStyle;
       state.currentLineCap = lineCap;

src/ol/render/canvas/replay.js

@@ -512,8 +512,12 @@ ol.render.canvas.Replay.prototype.replay_ = function(
             '6th instruction should be a number');
         ol.DEBUG && console.assert(instruction[6],
             '7th instruction should not be null');
+        ol.DEBUG && console.assert(typeof instruction[8] === 'number',
+            '9th instruction should be a number');
         var usePixelRatio = instruction[7] !== undefined ?
             instruction[7] : true;
+        var renderedPixelRatio = instruction[8];
+
         var lineWidth = /** @type {number} */ (instruction[2]);
         if (pendingStroke) {
           context.stroke();
@@ -525,7 +529,15 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         context.lineJoin = /** @type {string} */ (instruction[4]);
         context.miterLimit = /** @type {number} */ (instruction[5]);
         if (ol.has.CANVAS_LINE_DASH) {
-          context.setLineDash(/** @type {Array.<number>} */ (instruction[6]));
+          var lineDash = /** @type {Array.<number>} */ (instruction[6]);
+          if (usePixelRatio && pixelRatio !== renderedPixelRatio) {
+            lineDash = lineDash.map(function(dash) {
+              return dash * pixelRatio / renderedPixelRatio;
+            });
+            instruction[6] = lineDash;
+            instruction[8] = pixelRatio;
+          }
+          context.setLineDash(lineDash);
         }
         prevX = NaN;
         prevY = NaN;

src/ol/render/canvas/textreplay.js

@@ -169,7 +169,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
   var setStrokeStyleInstruction = [
     ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeState.strokeStyle,
     strokeState.lineWidth, strokeState.lineCap, strokeState.lineJoin,
-    strokeState.miterLimit, strokeState.lineDash, false
+    strokeState.miterLimit, strokeState.lineDash, false, 1
   ];
   this.instructions.push(setStrokeStyleInstruction);
   this.hitDetectionInstructions.push(setStrokeStyleInstruction);

test/spec/ol/renderer/canvas/replay.test.js

@@ -34,7 +34,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
       });
       style2 = new ol.style.Style({
         fill: new ol.style.Fill({color: 'white'}),
-        stroke: new ol.style.Stroke({color: 'black', width: 1})
+        stroke: new ol.style.Stroke({color: 'black', width: 1, lineDash: [3, 6]})
       });
       fillCount = 0;
       strokeCount = 0;
@@ -139,6 +139,23 @@ describe('ol.render.canvas.ReplayGroup', function() {
       expect(strokeCount).to.be(3);
       expect(beginPathCount).to.be(3);
     });
+
+    it('applies the pixelRatio to the linedash array', function() {
+      var lineDash, lineDashCount = 0;
+
+      context.setLineDash = function(lineDash_) {
+        lineDashCount++;
+        lineDash = lineDash_.slice();
+      };
+
+      ol.renderer.vector.renderFeature(replay, feature1, style2, 1);
+      ol.renderer.vector.renderFeature(replay, feature2, style2, 1);
+      replay.replay(context, 2, transform, 0, {});
+
+      expect(lineDashCount).to.be(1);
+      expect(style2.getStroke().getLineDash()).to.be.eql([3, 6]);
+      expect(lineDash).to.be.eql([6, 12]);
+    });
   });
 
 });

test_rendering/spec/ol/style/linestring.test.js

@@ -14,7 +14,7 @@ describe('ol.rendering.style.LineString', function() {
 
   var target, map, vectorSource;
 
-  function createMap(renderer) {
+  function createMap(renderer, opt_pixelRatio) {
     target = createMapDiv(50, 50);
 
     vectorSource = new ol.source.Vector();
@@ -23,6 +23,7 @@ describe('ol.rendering.style.LineString', function() {
     });
 
     map = new ol.Map({
+      pixelRatio: opt_pixelRatio || 1,
       target: target,
       renderer: renderer,
       layers: [vectorLayer],
@@ -85,6 +86,7 @@ describe('ol.rendering.style.LineString', function() {
           color: '#000000',
           width: 2,
           lineCap: 'square',
+          lineDash: [4, 8],
           lineJoin: 'round'
         })
       }));
@@ -105,5 +107,13 @@ describe('ol.rendering.style.LineString', function() {
       expectResemble(map, 'spec/ol/style/expected/linestring-strokes-webgl.png',
           14.6, done);
     });
+
+    it('tests the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      createFeatures();
+      expectResemble(
+          map, 'spec/ol/style/expected/linestring-strokes-canvas-hidpi.png',
+          3.0, done);
+    });
   });
 });