Merge pull request #10380 from mike-000/patch-5

Adjust examples for layer canvas pixel ratio and rotation

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;
+  // center the canvas and remove rotation to position clipping
-  const size = map.getSize();
+  ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
-  ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
+  ctx.rotate(-canvasRotation);
-  ctx.scale(3 * pixelRatio, 3 * pixelRatio);
+
+  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.scale(1 / 3 / canvasPixelRatio, 1 / 3 / canvasPixelRatio);
-  ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
+
+  // reapply canvas rotation and position
+  ctx.rotate(canvasRotation);
+  ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2);
 });
 
 osm.on('postrender', function(event) {

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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
@@ -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,
+    const pixel = getRenderPixel(event, mousePosition);
-      radius * pixelRatio, 0, 2 * Math.PI);
+    const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
-    ctx.lineWidth = 5 * pixelRatio;
+    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();
   }

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()
@@ -33,11 +34,20 @@ 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]]);
+  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();
 });