From 10f9a70d5faada3e0f6685ed53a3bdac5fb938f5 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Wed, 4 Dec 2019 22:59:16 +0000 Subject: [PATCH 1/4] Adjust for layer canvas pixel ratio and rotation --- examples/layer-clipping.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/examples/layer-clipping.js b/examples/layer-clipping.js index dc7a892dae..a6805fdac5 100644 --- a/examples/layer-clipping.js +++ b/examples/layer-clipping.js @@ -18,11 +18,17 @@ const map = new Map({ osm.on('prerender', function(event) { const ctx = event.context; + + // calculate the pixel ratio and rotation of the canvas + const matrix = event.inversePixelTransform; + const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]); + const canvasRotation = -Math.atan2(matrix[1], matrix[0]); ctx.save(); - const pixelRatio = event.frameState.pixelRatio; - const size = map.getSize(); - ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio); - ctx.scale(3 * pixelRatio, 3 * pixelRatio); + // center the canvas and remove rotation to position clipping + ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2); + ctx.rotate(-canvasRotation); + + ctx.scale(3 * canvasPixelRatio, 3 * canvasPixelRatio); ctx.translate(-75, -80); ctx.beginPath(); ctx.moveTo(75, 40); @@ -34,8 +40,11 @@ osm.on('prerender', function(event) { ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.clip(); ctx.translate(75, 80); - ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio); - ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio); + ctx.scale(1 / 3 / canvasPixelRatio, 1 / 3 / canvasPixelRatio); + + // reapply canvas rotation and position + ctx.rotate(canvasRotation); + ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2); }); osm.on('postrender', function(event) { From aaae50e68991db6c3680b3c94bacce49af2c7e0d Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Wed, 4 Dec 2019 23:04:44 +0000 Subject: [PATCH 2/4] Adjust for layer canvas pixel ratio and rotation --- examples/layer-spy.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/layer-spy.js b/examples/layer-spy.js index d7d27bc0a8..4418e7a5ca 100644 --- a/examples/layer-spy.js +++ b/examples/layer-spy.js @@ -3,6 +3,7 @@ import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import {fromLonLat} from '../src/ol/proj.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {getRenderPixel} from '../src/ol/render.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; const attributions = '© MapTiler ' + @@ -65,14 +66,15 @@ container.addEventListener('mouseout', function() { // before rendering the layer, do some clipping imagery.on('prerender', function(event) { const ctx = event.context; - const pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse - ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, - radius * pixelRatio, 0, 2 * Math.PI); - ctx.lineWidth = 5 * pixelRatio; + const pixel = getRenderPixel(event, mousePosition); + const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]); + const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)); + ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI); + ctx.lineWidth = 5 * canvasRadius / radius; ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.stroke(); } From b4ae4ab86f5c87e020626e9a7340477c29e551fe Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Wed, 4 Dec 2019 23:08:29 +0000 Subject: [PATCH 3/4] Adjust for layer canvas rotation --- examples/layer-swipe.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js index c39189391c..c9e4d0bd65 100644 --- a/examples/layer-swipe.js +++ b/examples/layer-swipe.js @@ -3,6 +3,7 @@ import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {getRenderPixel} from '../src/ol/render.js'; const osm = new TileLayer({ source: new OSM() @@ -34,10 +35,18 @@ const swipe = document.getElementById('swipe'); aerial.on('prerender', function(event) { const ctx = event.context; const width = ctx.canvas.width * (swipe.value / 100); + const tl = getRenderPixel(event, [width, 0]); + const tr = getRenderPixel(event, [mapSize[0], 0]); + const bl = getRenderPixel(event, [width, mapSize[1]]); + const br = getRenderPixel(event, mapSize); ctx.save(); ctx.beginPath(); - ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height); + ctx.moveTo(tl[0], tl[1]); + ctx.lineTo(bl[0], bl[1]); + ctx.lineTo(br[0], br[1]); + ctx.lineTo(tr[0], tr[1]); + ctx.closePath(); ctx.clip(); }); From 2790d506607961cb4cf6a8a2be76cac7e0959d67 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Wed, 4 Dec 2019 23:47:12 +0000 Subject: [PATCH 4/4] Adjust for layer canvas rotation replace missed lines --- examples/layer-swipe.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js index c9e4d0bd65..5d6a20b274 100644 --- a/examples/layer-swipe.js +++ b/examples/layer-swipe.js @@ -34,7 +34,8 @@ const swipe = document.getElementById('swipe'); aerial.on('prerender', function(event) { const ctx = event.context; - const width = ctx.canvas.width * (swipe.value / 100); + const mapSize = map.getSize(); + const width = mapSize[0] * (swipe.value / 100); const tl = getRenderPixel(event, [width, 0]); const tr = getRenderPixel(event, [mapSize[0], 0]); const bl = getRenderPixel(event, [width, mapSize[1]]);