Dedicated transforms
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user