From a0e310700ceacab819082a3ed50f2fcf8294eb07 Mon Sep 17 00:00:00 2001 From: Thomas Chandelle Date: Tue, 8 Nov 2016 15:06:45 +0100 Subject: [PATCH] Apply pixelRatio to line dash --- src/ol/render/canvas/linestringreplay.js | 6 +++--- src/ol/render/canvas/polygonreplay.js | 8 ++++---- src/ol/render/canvas/replay.js | 14 +++++++++++++- src/ol/render/canvas/textreplay.js | 2 +- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/ol/render/canvas/linestringreplay.js b/src/ol/render/canvas/linestringreplay.js index 55b00a0b49..0b4b384bb9 100644 --- a/src/ol/render/canvas/linestringreplay.js +++ b/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 ]); diff --git a/src/ol/render/canvas/polygonreplay.js b/src/ol/render/canvas/polygonreplay.js index f1fb40850c..20e4bd27a6 100644 --- a/src/ol/render/canvas/polygonreplay.js +++ b/src/ol/render/canvas/polygonreplay.js @@ -143,7 +143,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 +195,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 +232,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(); @@ -373,7 +373,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr 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; diff --git a/src/ol/render/canvas/replay.js b/src/ol/render/canvas/replay.js index cb9fce4c17..9e948be733 100644 --- a/src/ol/render/canvas/replay.js +++ b/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.} */ (instruction[6])); + var lineDash = /** @type {Array.} */ (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; diff --git a/src/ol/render/canvas/textreplay.js b/src/ol/render/canvas/textreplay.js index 6f5c971161..3f7ef786fa 100644 --- a/src/ol/render/canvas/textreplay.js +++ b/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);