From a0e310700ceacab819082a3ed50f2fcf8294eb07 Mon Sep 17 00:00:00 2001 From: Thomas Chandelle Date: Tue, 8 Nov 2016 15:06:45 +0100 Subject: [PATCH 1/3] 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); From 7ee04ec200ace6605183a309c698d58b58473d1b Mon Sep 17 00:00:00 2001 From: Thomas Chandelle Date: Mon, 14 Nov 2016 09:50:47 +0100 Subject: [PATCH 2/3] Compare current linedash and new linedash as arrays --- src/ol/render/canvas/polygonreplay.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ol/render/canvas/polygonreplay.js b/src/ol/render/canvas/polygonreplay.js index 20e4bd27a6..f5a5b13290 100644 --- a/src/ol/render/canvas/polygonreplay.js +++ b/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'); @@ -367,7 +368,7 @@ 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) { From 3b64133f21393f98495ac4bfdc42284225c1f421 Mon Sep 17 00:00:00 2001 From: Thomas Chandelle Date: Mon, 14 Nov 2016 09:09:32 +0100 Subject: [PATCH 3/3] Add tests for linedash for HiDPI display --- test/spec/ol/renderer/canvas/replay.test.js | 19 +++++++++++++++++- .../linestring-strokes-canvas-hidpi.png | Bin 0 -> 928 bytes .../expected/linestring-strokes-canvas.png | Bin 787 -> 515 bytes .../spec/ol/style/linestring.test.js | 12 ++++++++++- 4 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 test_rendering/spec/ol/style/expected/linestring-strokes-canvas-hidpi.png diff --git a/test/spec/ol/renderer/canvas/replay.test.js b/test/spec/ol/renderer/canvas/replay.test.js index 68ee494d1c..da8a61ee52 100644 --- a/test/spec/ol/renderer/canvas/replay.test.js +++ b/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]); + }); }); }); diff --git a/test_rendering/spec/ol/style/expected/linestring-strokes-canvas-hidpi.png b/test_rendering/spec/ol/style/expected/linestring-strokes-canvas-hidpi.png new file mode 100644 index 0000000000000000000000000000000000000000..600e4c1336f190a4deb8cd8e03ae8b8565a1bbcf GIT binary patch literal 928 zcmV;R17G}!P)jmi-!*zovB{rfchL_|bHL_|bHL}c0&fv>;^px`zYc?A3bdj0qfJaL*) zg53g|42v;{PX9NFP!2dDSd2k@2hz^6OPCqVAAVjjdcYQ-@5CdJ295|8U>n#0y1+AM z*(J~#!D8%Udc$>K!Ch*}wZ*U)N0>s0V-?Iil5w4g45?>`h=>c%fs*Sa#OznzVV2BY zVA*Xt@sYFqj8%evOauEvND4RzdA8jzo?>p9;CS97x=A)o_`S;Gh@KxS_knMW z{t-VhcjQqj0-wh6_(j5sGDqpBS+))-FaHuoEH2@iqy=*2S+c)!oXbDWVE1y# zwH)w;(M@e^@8vTLk3?!r=l)`b@H4pB-OGo)kv@0D|M~;xvB(G-RaL0~0000Z$>+fwksNy>rG=LqjJ6ZwA;vBld+kVF|snH<$rOJPUpSS>%FyIQMdaV zuD6kuAdZ6|Nkl76gSIP5648p|ATTl^r5H*nG6xk+Z6--XOG=U5-*06X7u(J#iZ(MT zMV2I@wO&TzI0({IJUdWEKj}rvjnY&`0HoX~x!CMRCOjUGXRRp$*FYbb{+#3(1(bnI ztFNCe9oHxWFMnF+i%lmVAu9P4sItUm1Ms7mvnD8tMb6J*q^9cG2HB|pu9b*7B)G7ATX3#%4Vmy|QZ3Nsy zeVGh(zxdCK(W!p#2WsEsW|pmOiz~*Lvs~ppxwUUu+`+B@3{Yj3tHi$ljaj$04T{Wo gK`Wv*xX0sxFIlFE#w{-Kl`V7Wde19~^?|+xsZ6^qcnU#5i zwpIs=tyP*0`rY1QuY3QevR9aq^Yf=~sSL!fb9lJ%!)1*^kh8O=?=F+;c<1P7!^xL+ z)`*l@_WX>`LZC5%C?)c47dJvoCQdp+h}jIcLWqxbY#ARLQp$&34?ATrFI#Ii%Z7kh zsQTsQJLzMn%71tF_x~y%<*3)2tkjbikm)o#7DAlRsf&x|fE*lnf~fkq1H^|aBOJE2 zeC&3y?Xh*Vo~hZ&cz-UspiaTr;aoyzW$!9GvXh!YGMBB&k76h;8LKGeQ`GST7Mm zVN-(eOOBt&%mg7GlvB)(zAO6z;5yVN48GiuX$$kPjw$Zyh4*@X+?@@IqU*%?3)5@QuE&GC`fY1Rpn*{5HSqdJ$Ag18) z?#nk5%Z{D`_^Q^4YRf(#%c`A93v^qK>SV4Ut5iF9D;N{aPDYqdA&a_zxC&l~eLaUT zxjK^twPhPf9S}ur*+pF61g;FkSG8j@qUY`cxOGy0yxQ_AkPy{Q0m3!(F7P^F7J1RBh2=3KR`6`jmOa;PneVW6O0%+RYjN`b ugwTNc^kDVH)_!9mTI<|3NUh;^F!m28hsHA_%;!k}0000