ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust for layer canvas pixel ratio and rotation

Browse Source
This commit is contained in:
mike-000
2019-12-04 22:59:16 +00:00
committed by GitHub
parent fb73bbaa00
commit 10f9a70d5f
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
examples/layer-clipping.js
View File

@@ -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) {