From 3791dee358c0a145521057957baff5ce116b540d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Fri, 9 Apr 2021 19:54:06 +0200 Subject: [PATCH 1/4] Fix immediate render with pixel ratio != 1 --- src/ol/render/canvas/Immediate.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/ol/render/canvas/Immediate.js b/src/ol/render/canvas/Immediate.js index 101d9fe22b..59e51c379e 100644 --- a/src/ol/render/canvas/Immediate.js +++ b/src/ol/render/canvas/Immediate.js @@ -982,24 +982,30 @@ class CanvasImmediateRenderer extends VectorContext { const strokeStyleLineJoin = strokeStyle.getLineJoin(); const strokeStyleWidth = strokeStyle.getWidth(); const strokeStyleMiterLimit = strokeStyle.getMiterLimit(); + const lineDash = strokeStyleLineDash + ? strokeStyleLineDash + : defaultLineDash; this.strokeState_ = { lineCap: strokeStyleLineCap !== undefined ? strokeStyleLineCap : defaultLineCap, - lineDash: strokeStyleLineDash ? strokeStyleLineDash : defaultLineDash, - lineDashOffset: strokeStyleLineDashOffset - ? strokeStyleLineDashOffset - : defaultLineDashOffset, + lineDash: + this.pixelRatio_ === 1 + ? lineDash + : lineDash.map((n) => n * this.pixelRatio_), + lineDashOffset: + (strokeStyleLineDashOffset + ? strokeStyleLineDashOffset + : defaultLineDashOffset) * this.pixelRatio_, lineJoin: strokeStyleLineJoin !== undefined ? strokeStyleLineJoin : defaultLineJoin, lineWidth: - this.pixelRatio_ * (strokeStyleWidth !== undefined ? strokeStyleWidth - : defaultLineWidth), + : defaultLineWidth) * this.pixelRatio_, miterLimit: strokeStyleMiterLimit !== undefined ? strokeStyleMiterLimit From c55366d35e36dea8d24c41721a97998de29717cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Fri, 9 Apr 2021 19:56:17 +0200 Subject: [PATCH 2/4] use correct stride for draw image --- src/ol/render/canvas/Immediate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ol/render/canvas/Immediate.js b/src/ol/render/canvas/Immediate.js index 59e51c379e..8cd6cb1dfe 100644 --- a/src/ol/render/canvas/Immediate.js +++ b/src/ol/render/canvas/Immediate.js @@ -280,7 +280,7 @@ class CanvasImmediateRenderer extends VectorContext { flatCoordinates, offset, end, - 2, + stride, this.transform_, this.pixelCoordinates_ ); From 5ba833a82c834dcfda2d9ecf4323146029e1b622 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Tue, 13 Apr 2021 20:43:17 +0200 Subject: [PATCH 3/4] remove unused argument from function call --- test/browser/spec/ol/render/canvas/immediate.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/browser/spec/ol/render/canvas/immediate.test.js b/test/browser/spec/ol/render/canvas/immediate.test.js index 9c3e254025..5fa1ef227d 100644 --- a/test/browser/spec/ol/render/canvas/immediate.test.js +++ b/test/browser/spec/ol/render/canvas/immediate.test.js @@ -325,7 +325,7 @@ describe('ol.render.canvas.Immediate', function () { ], ]).transform('EPSG:4326', 'EPSG:3857'); - canvas.drawMultiPolygon(multiPolygonGeometry, null); + canvas.drawMultiPolygon(multiPolygonGeometry); const expected = [ // first polygon From 74db0e7d21d7ef8b4995f9a0fbaba083e40ec4ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Thu, 17 Jun 2021 23:14:49 +0200 Subject: [PATCH 4/4] Add render test for immediate render with pixel ratio 2 --- .../cases/immediate-pixel-ratio/expected.png | Bin 0 -> 6609 bytes .../cases/immediate-pixel-ratio/main.js | 76 ++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 test/rendering/cases/immediate-pixel-ratio/expected.png create mode 100644 test/rendering/cases/immediate-pixel-ratio/main.js diff --git a/test/rendering/cases/immediate-pixel-ratio/expected.png b/test/rendering/cases/immediate-pixel-ratio/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..e669542746ec4637916b5995c749b5ba349fdea6 GIT binary patch literal 6609 zcmdT}XCT|(yZ?$2jgnfmMTcFhTD7URYE!gov{q5nrnUq%N-JjVU8`EOMrtNTrL~o! zh*%Y)#0s%*e)sqCe_!4g_rCg`^E~HSXMCRXJY*GL$!btM-?L<|)S z@bFqLNv_IOAp3ib?yvb0WXfE(Q(F-cuih3T`+eRAC^hwe(#u7OuG3_Gy{#_U z!%LI#C42%c72LYJl zMS;85N`VWXGeG|nfws^{tGDm&wG#gSj2FY>f#Gt(#K4+xEI*`a5&e4`Q9SO5+QH~Q zy>pYUIQOJy8KqQi^&tvYVG1or?&LlE=|#z=@40f?-J-yYT7RkOFr~g+1~<3ieJGcm zM&Vca9k-M>Cg*HY{`A@&2V}@%4`#u#Oq)2OW5bhqZdwE*#X`16bnQUg#ITElv9LFy0#@(`G zK-@1e4{s?2z6&4iwe$I7{{HryRd?B|Fczq;p!v=r{s{BxoV4qsRVIpLB7qHPbjPcH zU6(UiD=X?H-mL`%>I$k$>N|&jDoioq3_-jYnslKf zZ?uf;0^XGIIi)NDJj#b6qvM2`c4#Tv(6_rj?}C8e^SdK+{kL%L_qI(Ti&tsY8z#Oo z8z}zBnNErShmZ#Rwi^}sdgP9>Oj7Qr5Jnfm1Slhae`W4|D{Hphe@~3oJ5C4j zLe_a&Y3hkYRL*?!Pvl-K1!m z`a;|N=7Feyb0LesR9Y%VW&bNKZn1*xyUQxoA|wrzOh=irLSyxx>VoQ3BBC;8Gy@OC zXul)}0gXcAy5WSpNCrvIW_IsHkiht2kf^k;NXtosPWUy7y7AOhOz3_iMV%YIN}S$- znFM&J=}>7?(W+Nb+!HNe5ip}z{QKJ-bvcltGlHVipaiiSK~d%Q8)T2|z`~kw$&2M| zo@qJ=D>Gxz{><7-@#HdN%tMNE3>4>RXw}<{Lxu_vJR0f?6xY9y;$8>uB0Td(mTTxuv z@x1bOEYtCM6G|Vc42lFd% z@hL%>WodA5dW}Scl1NJ?)?oOU5ft;1!wMKw%byt+5tq$Bw8xh2`(3q#08{G|RKj`m zu&|87P?$IU=&yDOR7R8amjoSPs-%)lo@82EK!{NrZO^9wF$jMwWcsMo(VChL^U=H} zMBxp8ZdRzyWI4@+;*xKDklj)?`GxbfLt5al0VAmTn|Zqc^4wycl4n8Vg_X7Hwb?gzJh!`G*p;nPm4_U|^I`tz}|Ju7uf z_7( z|6-6|R($9w#MBg1jO>VI-e}M@rYw+`T!8eA8<@G6PARyvD#>q?z()e!2TMpaUG?Yx z?<^zupAh`Nm4gD`7j=Y~m>HrO#Q_e26OR*L83Up0d0`Y{q;b2%!DgzWAUx zb#y1d4o}#>9p;X&Yv}lBzL}DbX$$rI#=be}>Kxqo!}>U})6NZZ?z zhcW#)T+}Qp`{{YlZ4RdNg^-ccZd7|H>Npmi+N64HsN>gmT;{CW8N<9m!B_RnYx0+ntyGH)5b#6J4 zG9{j+?bt&!XcB_K_zZNr46<|1($OP>C=fHGGe{|&T zw4Sj35%>8W_K{lmY}mKIfpZrpyjhdrU-b38=zc{rQZ6>_=+j)TkG^4V%DCG0_~h;G z?1qNQgx_4Y_N;?-^PNwG8oWAK>*UW`nc>1rH*PMT3{M4dS3Ur=Gy{}NU9C<|+&q7b z&rLXZsrehaGK9>@i99)vKCC~ux?wk?EUP*HIIFI{Jx9S4%U9zsrMh}O;%lhYXsMnd1E^((sbwdO+z`-nWgk>ffT>R(;4VBLO5;R@hPk+mwcoUk=)~)~ z3u9Yp(x1>EkC`=c;cD#yYVQkA?9 zeZ@YGY4X4%q|Aol0K2)d`5ZBP5p1pMjc9qm!t=PIY){_lv zE;vBq?Iq`z2kxH-*>Jq(@MsNmS3={bxq12#k33EhadAb4!ni=1yHzq=iZ>3%mkk7L znig-~%!MQL^*76go=6`{%|XM?Ov%4SF5K85UV@Ytygu6RTRJ7x+NyXShWH>}l3@Pr z+2a~(g?!l&Y{OcDXQ!alyP+Jr*J-d%c9p^QU&rhQto>u3~>w)E2G!Q$1=r(fP|^>7(ti_p$YN z$GujaPlR{Q;}mq0U}@_Mnq=~P90Mkj==b20=>DvX^9>K3CUnhO{58Ok>vb6mi5 zD!WYFyY%bY>~U!IR>_#!gLov}2m0B1}>c>Im;krDsD+%iuj3r&)=DEHOnhm7B)eSJFmJ3~BXKzf=@2 zzA&o`X0Y;mh+2i$5RuYBa1{ z)UcBmhrd^{PtMDo2gcDML=k0F~SDRvgT`^@iSEkej! zUl5U%X>Dhr@rx8-!!SlYJJ%CQQPzxf&UmPyFe z#1>AP)W5UxMt+Y6ugw484*A}Y`q$~yC$zx9bRW7p0_i-1I31stJW-sMKQDyiz%{qO z;qvX%3MD8l1x1*PNd*D?pkZotL*+H{#2&2zj%l%xG#%;fENG5AtlK-zxJuG**XW`9 zkg+vv^>|apitOfNXRJ*3H$rL#l>Y=8&(G8>j)QNyXV9-1-|z7(1#xtm z^V0d*k(voNd2Ed#${{V)Cq|%;YOl9z!W0TR+y^^}E501A{t!*3Rt!@taLXgkQ*%zK!c)It3 zRH@gl8gFS1asspP&55N5P};5Xz3k@WqEnQ!V)RVVXUOYvEF)77+!>*%}KEbXl3Ap+f8AFhvnJmw;wq< zzITp<_xAEVqIM@ka+rr{RS9LAm3ZG{4++&ct>de)nWGPGn@qCl3r-o&vqtff4G0}1#+@3j?;|!?QB3*`>dPvD!Uj%UV)_&4SGf3tQ^^tXmjhLTFI^wE4~Q`DsqfQrfSYKbA|} z!NKvf>f*fHNtw|{e}ii231q@tEV{jQEN9tJW&y`hs_^{?9iO1?_y3!VTwDo1pc3DV%)lx`r>aY`0z@;l1 z$}Xhbjqt-S^+tL?c*J94KIVOr|Q%*BX8{s3gBrnBU%D60{Gx zGcKKWj{@Z1^lVv6y!r*?-$Ag~4BPm?hn+6=(}GonSIDgncTF*Oxvt|GJq)&fCGS_0j6tZ!#}M&lOGSg;PdyhdM*>#5imYR@u~zh zphB%+5#3v!g|nW$z@5H06SOr|qJNN2NrveY2O<8g z0bHc{AFdsfn^dIHk-PV*t7fNjzq`_FDoC_dZ@9eB`^$}Je)$c)X=Zl++673XV3252 zDC$NTiJnsQ{w z7whX@Y497)t4;Q#si04M2#U(LXwhSfUqd$?Iwjur^e%XGe@`kLD%E#(OJK&{=3E=o zc%XwnqBV^w{mI$Tm=J`;c0&*=H(tpx6NVLoe62hl=<14?nsGqbFAD8l`8B%RLcAP< zs=*vTwJNBllSN0~*gnwnzdnZg^)4;b9UdAQ-IgRW@6V6%@nnbJ!_tQ?x?rw9dT{pw zto~f?wbWQmv8{z~cQBtBh*({A#(=GbOG7d{i9?UO`fqi%?hB1pRpHlxIW%^!5(rja zLaRueo}=kIcQ=U*aQ9yM@FL9;6M_JD zW2nFxBbQyPDiL@C4p%;^k#AE8BwLt0Jy+e9^~(=#2BGkl$DvDuG57hy+d^^f z`qPxEKE_JnE!Y{5zOQDOFcNuowt)e ydhwNPM|qz@S*EdU=u^kVuHB&fKUiZpg1Zy5@7T9KL{Vxqfc8CuyHy%C5&s1dTZNSX literal 0 HcmV?d00001 diff --git a/test/rendering/cases/immediate-pixel-ratio/main.js b/test/rendering/cases/immediate-pixel-ratio/main.js new file mode 100644 index 0000000000..773bd351f5 --- /dev/null +++ b/test/rendering/cases/immediate-pixel-ratio/main.js @@ -0,0 +1,76 @@ +import VectorLayer from '../../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../../src/ol/source/Vector.js'; +import {Feature, Map, View} from '../../../../src/ol/index.js'; +import {Fill, Icon, Stroke, Style, Text} from '../../../../src/ol/style.js'; +import {LineString, MultiPoint, Point} from '../../../../src/ol/geom.js'; +import {getVectorContext} from '../../../../src/ol/render.js'; + +const coordinates = [ + [50, -200, 0], + [200, -200, 0], + [100, -50, 0], +]; +const img = new Image(); +img.src = + 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDIwIDIwIiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47Ij48cGF0aCBkPSJtIDEwIDEwIDEwdiAtMTBoIiAvPjwvc3ZnPg=='; +const point = new MultiPoint(coordinates); +const pointStyle = new Style({ + image: new Icon({ + img: img, + size: [10, 10], + imgSize: [10, 10], + }), +}); +const line = new LineString(coordinates); +const lineStyle = new Style({ + stroke: new Stroke({ + color: 'red', + width: 40, + lineCap: 'square', + lineJoin: 'round', + lineDash: [30, 100], + lineDashOffset: 5, + }), + text: new Text({ + text: '--- T e s t ___', + placement: 'point', + fill: new Fill({ + color: 'green', + }), + font: '50px Ubuntu', + stroke: new Stroke({ + color: 'blue', + width: 10, + lineCap: 'butt', + lineDash: [10, 5], + lineDashOffset: 4, + }), + }), +}); + +const vector = new VectorLayer({ + source: new VectorSource({ + features: [new Feature(new Point([-20, -20]))], + }), +}); + +vector.on('postrender', function (evt) { + const context = getVectorContext(evt); + context.setStyle(lineStyle); + context.drawGeometry(line); + + context.setStyle(pointStyle); + context.drawGeometry(point); +}); + +new Map({ + target: 'map', + layers: [vector], + view: new View({ + center: [256 / 2, -256 / 2], + resolution: 1, + devicePixelRatio: 2, + }), +}); + +render();