From 4c787c7f5725689fa8e73c23c218eb365c74c5ee Mon Sep 17 00:00:00 2001 From: Florent gravin Date: Mon, 12 Nov 2018 18:03:33 +0100 Subject: [PATCH 1/3] Set composite root div position relative --- src/ol/renderer/Composite.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js index 2e4643eeb5..dfd7aa4596 100644 --- a/src/ol/renderer/Composite.js +++ b/src/ol/renderer/Composite.js @@ -37,6 +37,7 @@ class CompositeMapRenderer extends MapRenderer { style.width = '100%'; style.height = '100%'; + this.element_.style.position = 'relative'; this.element_.className = CLASS_UNSELECTABLE; const container = map.getViewport(); From 697e475ee45ce0f67308513a9d6dbf41f9889da4 Mon Sep 17 00:00:00 2001 From: Florent gravin Date: Mon, 12 Nov 2018 18:04:11 +0100 Subject: [PATCH 2/3] Add composite renderFrame() in IntermediateCanvas --- src/ol/renderer/canvas/IntermediateCanvas.js | 63 ++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/ol/renderer/canvas/IntermediateCanvas.js b/src/ol/renderer/canvas/IntermediateCanvas.js index af7d7dc58a..5126dad955 100644 --- a/src/ol/renderer/canvas/IntermediateCanvas.js +++ b/src/ol/renderer/canvas/IntermediateCanvas.js @@ -39,6 +39,12 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer { */ this.hitCanvasContext_ = null; + /** + * @protected + * @type {CanvasRenderingContext2D} + */ + this.layerContext = createCanvasContext2D(); + this.layerContext.canvas.style.position = 'absolute'; } /** @@ -87,6 +93,63 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer { this.postCompose(context, frameState, layerState); } + /** + * @inheritDoc + */ + renderFrame(frameState, layerState) { + + this.preRender(frameState); + const image = this.getImage(); + if (image) { + + // clipped rendering if layer extent is set + const extent = layerState.extent; + const clipped = extent !== undefined && + !containsExtent(extent, frameState.extent) && + intersects(extent, frameState.extent); + if (clipped) { + this.clip(this.layerContext, frameState, /** @type {import("../../extent.js").Extent} */ (extent)); + } + + const imageTransform = this.getImageTransform(); + + // for performance reasons, context.setTransform is only used + // when the view is rotated. see http://jsperf.com/canvas-transform + const dx = imageTransform[4]; + const dy = imageTransform[5]; + const dw = image.width * imageTransform[0]; + const dh = image.height * imageTransform[3]; + + if (dw >= 0.5 && dh >= 0.5) { + const pixelRatio = frameState.pixelRatio; + const canvas = this.layerContext.canvas; + let width = Math.round(frameState.size[0] * pixelRatio); + let height = Math.round(frameState.size[1] * pixelRatio); + + 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 { + this.layerContext.clearRect(0, 0, width, height); + } + + + // this.clear(this.canvas_.width, this.canvas_.height); + this.layerContext.drawImage(image, 0, 0, +image.width, +image.height, + Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh)); + } + + if (clipped) { + this.layerContext.restore(); + } + } + + this.postRender(frameState, layerState); + return this.layerContext.canvas; + } + /** * @abstract * @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Canvas. From a6f94f865b22620ed900c4d6bae674a71deded33 Mon Sep 17 00:00:00 2001 From: Florent gravin Date: Mon, 12 Nov 2018 18:46:01 +0100 Subject: [PATCH 3/3] Clear canvas in prepareFrame() --- src/ol/renderer/canvas/ImageLayer.js | 1 + src/ol/renderer/canvas/IntermediateCanvas.js | 36 +++++++++++--------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js index 1b0c79cb35..0bca5ddad6 100644 --- a/src/ol/renderer/canvas/ImageLayer.js +++ b/src/ol/renderer/canvas/ImageLayer.js @@ -53,6 +53,7 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer { */ prepareFrame(frameState, layerState) { + this.clear(frameState); const pixelRatio = frameState.pixelRatio; const size = frameState.size; const viewState = frameState.viewState; diff --git a/src/ol/renderer/canvas/IntermediateCanvas.js b/src/ol/renderer/canvas/IntermediateCanvas.js index 5126dad955..8ebb13a8c1 100644 --- a/src/ol/renderer/canvas/IntermediateCanvas.js +++ b/src/ol/renderer/canvas/IntermediateCanvas.js @@ -121,22 +121,7 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer { const dh = image.height * imageTransform[3]; if (dw >= 0.5 && dh >= 0.5) { - const pixelRatio = frameState.pixelRatio; - const canvas = this.layerContext.canvas; - let width = Math.round(frameState.size[0] * pixelRatio); - let height = Math.round(frameState.size[1] * pixelRatio); - - 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 { - this.layerContext.clearRect(0, 0, width, height); - } - - - // this.clear(this.canvas_.width, this.canvas_.height); + this.clear(frameState); this.layerContext.drawImage(image, 0, 0, +image.width, +image.height, Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh)); } @@ -166,6 +151,25 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer { return abstract(); } + /** + * @param {import("../../PluggableMap.js").FrameState} frameState Frame state. + */ + clear(frameState) { + const pixelRatio = frameState.pixelRatio; + const canvas = this.layerContext.canvas; + const width = Math.round(frameState.size[0] * pixelRatio); + const height = Math.round(frameState.size[1] * pixelRatio); + + 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 { + this.layerContext.clearRect(0, 0, width, height); + } + } + /** * @inheritDoc */