From 32495388b9a76cca3e008ae5685c46eb83f69698 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 15 Nov 2018 17:07:42 +0100 Subject: [PATCH] Transform origin top left --- src/ol/renderer/Composite.js | 3 -- src/ol/renderer/canvas/ImageLayer.js | 42 ++++++++++++----------- src/ol/renderer/canvas/Layer.js | 1 + src/ol/renderer/canvas/TileLayer.js | 4 +-- src/ol/renderer/canvas/VectorTileLayer.js | 5 +-- 5 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js index 269ee6e560..67bbb8a501 100644 --- a/src/ol/renderer/Composite.js +++ b/src/ol/renderer/Composite.js @@ -31,9 +31,6 @@ class CompositeMapRenderer extends MapRenderer { */ this.element_ = document.createElement('div'); const style = this.element_.style; - style.display = 'flex'; - style.alignItems = 'center'; - style.justifyContent = 'center'; style.width = '100%'; style.height = '100%'; diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js index 2b8fc3becf..328244c0db 100644 --- a/src/ol/renderer/canvas/ImageLayer.js +++ b/src/ol/renderer/canvas/ImageLayer.js @@ -6,7 +6,7 @@ import ViewHint from '../../ViewHint.js'; import {containsExtent, intersects} from '../../extent.js'; import {getIntersection, isEmpty} from '../../extent.js'; import CanvasLayerRenderer from './Layer.js'; -import {create as createTransform, compose as composeTransform} from '../../transform.js'; +import {create as createTransform, compose as composeTransform, toString as transformToString} from '../../transform.js'; /** * @classdesc @@ -99,31 +99,20 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer { width = height = size; } - const transform = composeTransform(this.transform_, - width / 2, height / 2, - scale, scale, - 0, - imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution, - imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution); - - composeTransform(this.coordinateToCanvasPixelTransform, - pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5], - pixelRatio / viewResolution, -pixelRatio / viewResolution, - 0, - -viewCenter[0], -viewCenter[1]); - - this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio; - - const context = this.context; const canvas = context.canvas; + const pixelTransform = composeTransform(this.transform_, + frameState.size[0] / 2, frameState.size[1] / 2, + 1 / pixelRatio, 1 / pixelRatio, + rotation, + -width / 2, -height / 2 + ).slice(); + const canvasTransform = transformToString(pixelTransform); if (canvas.width != width || canvas.height != height) { canvas.width = width; canvas.height = height; - canvas.style.width = (width / pixelRatio) + 'px'; - canvas.style.height = (height / pixelRatio) + 'px'; } else { context.clearRect(0, 0, width, height); } @@ -139,6 +128,15 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer { const img = image.getImage(); + const transform = composeTransform(this.transform_, + width / 2, height / 2, + scale, scale, + 0, + imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution, + imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution); + + this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio; + const dx = transform[4]; const dy = transform[5]; const dw = img.width * transform[0]; @@ -153,7 +151,11 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer { context.restore(); } - const canvasTransform = 'rotate(' + rotation + 'rad)'; + const opacity = layerState.opacity; + if (opacity !== canvas.style.opacity) { + canvas.style.opacity = opacity; + } + if (canvasTransform !== canvas.style.transform) { canvas.style.transform = canvasTransform; } diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js index e19ec5cfba..4ba65a8389 100644 --- a/src/ol/renderer/canvas/Layer.js +++ b/src/ol/renderer/canvas/Layer.js @@ -42,6 +42,7 @@ class CanvasLayerRenderer extends LayerRenderer { const canvas = this.context.canvas; canvas.style.position = 'absolute'; + canvas.style.transformOrigin = 'top left'; canvas.className = this.getLayer().getClassName(); } diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js index e74af29e8a..aa4adc3917 100644 --- a/src/ol/renderer/canvas/TileLayer.js +++ b/src/ol/renderer/canvas/TileLayer.js @@ -222,10 +222,10 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer { const canvas = context.canvas; const canvasScale = tileResolution / frameState.viewState.resolution / tilePixelRatio; const pixelTransform = composeTransform(this.transform_, - 0, 0, + frameState.size[0] / 2, frameState.size[1] / 2, canvasScale, canvasScale, rotation, - 0, 0 + -width / 2, -height / 2 ); const canvasTransform = transformToString(pixelTransform); diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js index c5ffec5768..68fbb50ad5 100644 --- a/src/ol/renderer/canvas/VectorTileLayer.js +++ b/src/ol/renderer/canvas/VectorTileLayer.js @@ -5,7 +5,7 @@ import {getUid} from '../../util.js'; import {createCanvasContext2D} from '../../dom.js'; import TileState from '../../TileState.js'; import ViewHint from '../../ViewHint.js'; -import {listen, unlisten, unlistenByKey} from '../../events.js'; +import {listen, unlisten} from '../../events.js'; import EventType from '../../events/EventType.js'; import rbush from 'rbush'; import {buffer, containsCoordinate, equals, getIntersection, getTopLeft, intersects} from '../../extent.js'; @@ -75,9 +75,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer { const container = document.createElement('div'); const style = container.style; style.position = 'absolute'; - style.display = 'flex'; - style.alignItems = 'center'; - style.justifyContent = 'center'; style.width = '100%'; style.height = '100%';