Dedicated transforms

This commit is contained in:
Tim Schaub
2018-11-15 19:01:26 +01:00
parent ac3a1fb953
commit 832dadb3af
3 changed files with 15 additions and 26 deletions

View File

@@ -96,12 +96,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
const context = this.context;
const canvas = context.canvas;
const pixelTransform = composeTransform(this.transform_,
const pixelTransform = composeTransform(this.pixelTransform_,
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) {
@@ -122,7 +122,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
const img = image.getImage();
const transform = composeTransform(this.transform_,
const transform = composeTransform(this.tempTransform_,
width / 2, height / 2,
scale, scale,
0,

View File

@@ -29,10 +29,18 @@ class CanvasLayerRenderer extends LayerRenderer {
this.renderedResolution;
/**
* A temporary transform.
* @private
* @type {import("../../transform.js").Transform}
*/
this.transform_ = createTransform();
this.tempTransform_ = createTransform();
/**
* The transform for rendered pixels to viewport CSS pixels.
* @private
* @type {import("../../transform.js").Transform}
*/
this.pixelTransform_ = createTransform();
/**
* @protected
@@ -44,7 +52,6 @@ class CanvasLayerRenderer extends LayerRenderer {
canvas.style.position = 'absolute';
canvas.style.transformOrigin = 'top left';
canvas.className = this.getLayer().getClassName();
}
/**
@@ -145,25 +152,6 @@ class CanvasLayerRenderer extends LayerRenderer {
this.dispatchComposeEvent_(RenderEventType.RENDER, context, frameState, opt_transform);
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {number} offsetX Offset on the x-axis in view coordinates.
* @protected
* @return {!import("../../transform.js").Transform} Transform.
*/
getTransform(frameState, offsetX) {
const viewState = frameState.viewState;
const pixelRatio = frameState.pixelRatio;
const dx1 = pixelRatio * frameState.size[0] / 2;
const dy1 = pixelRatio * frameState.size[1] / 2;
const sx = pixelRatio / viewState.resolution;
const sy = -sx;
const angle = -viewState.rotation;
const dx2 = -viewState.center[0] + offsetX;
const dy2 = -viewState.center[1];
return composeTransform(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
}
/**
* Creates a transform for rendering to an element that will be rotated after rendering.
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
@@ -182,7 +170,7 @@ class CanvasLayerRenderer extends LayerRenderer {
const sy = -sx;
const dx2 = -viewState.center[0] + offsetX;
const dy2 = -viewState.center[1];
return composeTransform(this.transform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
return composeTransform(this.tempTransform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
}
}

View File

@@ -215,7 +215,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
const canvas = context.canvas;
const canvasScale = tileResolution / frameState.viewState.resolution / tilePixelRatio;
const pixelTransform = composeTransform(this.transform_,
const pixelTransform = composeTransform(this.pixelTransform_,
frameState.size[0] / 2, frameState.size[1] / 2,
canvasScale, canvasScale,
rotation,
@@ -350,6 +350,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
getTileImage(tile) {
return /** @type {import("../../ImageTile.js").default} */ (tile).getImage();
}
}