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

Use ol.transform.compose() for common transform compositions

Browse Source
This commit is contained in:
Tim Schaub
2016-06-24 10:43:14 -06:00
committed by Andreas Hocevar
parent a655234cc3
commit 618cb389e5
12 changed files with 80 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/ol/render/canvas/canvasimmediate.js
View File

@@ -272,10 +272,11 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off
if (rotation !== 0 || this.imageScale_ != 1) {
var centerX = x + this.imageAnchorX_;
var centerY = y + this.imageAnchorY_;
ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
ol.transform.scale(localTransform, this.imageScale_, this.imageScale_);
ol.transform.rotate(localTransform, rotation);
ol.transform.translate(localTransform, -centerX, -centerY);
ol.transform.compose(localTransform,
centerX, centerY,
this.imageScale_, this.imageScale_,
rotation,
-centerX, -centerY);
context.setTransform.apply(context, localTransform);
}
context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_,
@@ -320,11 +321,11 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse
var x = pixelCoordinates[offset] + this.textOffsetX_;
var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
if (this.textRotation_ !== 0 || this.textScale_ != 1) {
var localTransform = ol.transform.reset(this.tmpLocalTransform_);
ol.transform.translate(localTransform, x, y);
ol.transform.scale(localTransform, this.textScale_, this.textScale_);
ol.transform.rotate(localTransform, this.textRotation_);
ol.transform.translate(localTransform, -x, -y);
var localTransform = ol.transform.compose(this.tmpLocalTransform_,
x, y,
this.textScale_, this.textScale_,
this.textRotation_,
-x, -y);
context.setTransform.apply(context, localTransform);
}
if (this.textStrokeState_) {

21
src/ol/render/canvas/canvasreplay.js
View File

@@ -331,10 +331,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
if (scale != 1 || rotation !== 0) {
var centerX = x + anchorX;
var centerY = y + anchorY;
ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
ol.transform.scale(localTransform, scale, scale);
ol.transform.rotate(localTransform, rotation);
ol.transform.translate(localTransform, -centerX, -centerY);
ol.transform.compose(localTransform,
centerX, centerY, scale, scale, rotation, -centerX, -centerY);
context.transform.apply(context, localTransform);
}
var alpha = context.globalAlpha;
@@ -390,10 +388,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
x = pixelCoordinates[d] + offsetX;
y = pixelCoordinates[d + 1] + offsetY;
if (scale != 1 || rotation !== 0) {
ol.transform.translate(ol.transform.reset(localTransform), x, y);
ol.transform.scale(localTransform, scale, scale);
ol.transform.rotate(localTransform, rotation);
ol.transform.translate(localTransform, -x, -y);
ol.transform.compose(localTransform, x, y, scale, scale, rotation, -x, -y);
context.transform.apply(context, localTransform);
}
@@ -1897,11 +1892,11 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() {
ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
coordinate, resolution, rotation, skippedFeaturesHash, callback) {
var transform = ol.transform.reset(this.hitDetectionTransform_);
ol.transform.translate(transform, 0.5, 0.5);
ol.transform.scale(transform, 1 / resolution, -1 / resolution);
ol.transform.rotate(transform, -rotation);
ol.transform.translate(transform, -coordinate[0], -coordinate[1]);
var transform = ol.transform.compose(this.hitDetectionTransform_,
0.5, 0.5,
1 / resolution, -1 / resolution,
-rotation,
-coordinate[0], -coordinate[1]);
var context = this.hitDetectionContext_;
context.clearRect(0, 0, 1, 1);

16
src/ol/renderer/canvas/canvaslayerrenderer.js
View File

@@ -184,14 +184,14 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod;
ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) {
var viewState = frameState.viewState;
var pixelRatio = frameState.pixelRatio;
var transform = ol.transform.reset(this.transform_);
ol.transform.translate(transform,
pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2);
ol.transform.scale(transform,
pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
ol.transform.rotate(transform, -viewState.rotation);
return ol.transform.translate(transform,
-viewState.center[0] + offsetX, -viewState.center[1]);
var dx1 = pixelRatio * frameState.size[0] / 2;
var dy1 = pixelRatio * frameState.size[1] / 2;
var sx = pixelRatio / viewState.resolution;
var sy = -sx;
var angle = -viewState.rotation;
var dx2 = -viewState.center[0] + offsetX;
var dy2 = -viewState.center[1];
return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
};

18
src/ol/renderer/canvas/canvasmaprenderer.js
View File

@@ -120,17 +120,15 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta
* @return {!ol.Transform} Transform.
*/
ol.renderer.canvas.Map.prototype.getTransform = function(frameState) {
var pixelRatio = frameState.pixelRatio;
var viewState = frameState.viewState;
var resolution = viewState.resolution;
var transform = ol.transform.reset(this.transform_);
ol.transform.translate(transform,
this.canvas_.width / 2, this.canvas_.height / 2);
ol.transform.scale(transform,
pixelRatio / resolution, -pixelRatio / resolution);
ol.transform.rotate(transform, -viewState.rotation);
return ol.transform.translate(transform,
-viewState.center[0], -viewState.center[1]);
var dx1 = this.canvas_.width / 2;
var dy1 = this.canvas_.height / 2;
var sx = frameState.pixelRatio / viewState.resolution;
var sy = -sx;
var angle = -viewState.rotation;
var dx2 = -viewState.center[0];
var dy2 = -viewState.center[1];
return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
};

10
src/ol/renderer/canvas/canvastilelayerrenderer.js
View File

@@ -326,11 +326,11 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram
if (hasRenderListeners) {
var dX = drawOffsetX - offsetX / drawScale + offsetX;
var dY = drawOffsetY - offsetY / drawScale + offsetY;
var imageTransform = ol.transform.reset(this.imageTransform_);
ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY);
ol.transform.scale(imageTransform, pixelScale, -pixelScale);
ol.transform.rotate(imageTransform, -rotation);
ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
var imageTransform = ol.transform.compose(this.imageTransform_,
drawSize / 2 - dX, drawSize / 2 - dY,
pixelScale, -pixelScale,
-rotation,
-center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
this.dispatchRenderEvent(renderContext, frameState, imageTransform);
}
if (rotation || hasRenderListeners) {

12
src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
View File

@@ -148,13 +148,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
if (pixelSpace) {
origin = ol.extent.getTopLeft(tileExtent);
tileTransform = ol.transform.reset(this.tmpTransform_);
ol.transform.translate(tileTransform, offsetX, offsetY);
ol.transform.scale(tileTransform,
pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
ol.transform.rotate(tileTransform, rotation);
ol.transform.translate(tileTransform,
(origin[0] - center[0]) / tilePixelResolution,
(center[1] - origin[1]) / tilePixelResolution);
tileTransform = ol.transform.compose(this.tmpTransform_,
offsetX, offsetY,
pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
rotation,
(origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution);
} else {
tileTransform = transform;
}

11
src/ol/renderer/dom/domimagelayerrenderer.js
View File

@@ -118,14 +118,13 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt
var imageExtent = image.getExtent();
var imageResolution = image.getResolution();
var transform = ol.transform.create();
ol.transform.translate(transform,
frameState.size[0] / 2, frameState.size[1] / 2);
ol.transform.scale(transform,
imageResolution / viewResolution, imageResolution / viewResolution);
ol.transform.rotate(transform, viewRotation);
ol.transform.translate(transform,
ol.transform.compose(transform,
frameState.size[0] / 2, frameState.size[1] / 2,
imageResolution / viewResolution, imageResolution / viewResolution,
viewRotation,
(imageExtent[0] - viewCenter[0]) / imageResolution,
(viewCenter[1] - imageExtent[3]) / imageResolution);
if (image != this.image_) {
var imageElement = image.getImage(this);
// Bootstrap sets the style max-width: 100% for all images, which breaks

13
src/ol/renderer/dom/dommaprenderer.js
View File

@@ -123,15 +123,14 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState)
var context = this.context_;
var canvas = context.canvas;
var transform = ol.transform.reset(this.transform_);
ol.transform.translate(transform, canvas.width / 2, canvas.height / 2);
ol.transform.scale(transform,
pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
ol.transform.rotate(transform, -viewState.rotation);
ol.transform.translate(transform,
var transform = ol.transform.compose(this.transform_,
canvas.width / 2, canvas.height / 2,
pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution,
-rotation,
-viewState.center[0], -viewState.center[1]);
var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio,
extent, this.transform_, rotation);
extent, transform, rotation);
var composeEvent = new ol.render.Event(type, map, vectorContext,
frameState, context, null);
map.dispatchEvent(composeEvent);

12
src/ol/renderer/dom/domtilelayerrenderer.js
View File

@@ -210,13 +210,13 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta
}
resolution = tileLayerZ.getResolution();
origin = tileLayerZ.getOrigin();
ol.transform.translate(ol.transform.reset(transform),
frameState.size[0] / 2, frameState.size[1] / 2);
ol.transform.scale(transform,
resolution / viewState.resolution, resolution / viewState.resolution);
ol.transform.rotate(transform, viewState.rotation);
ol.transform.translate(transform,
ol.transform.compose(transform,
frameState.size[0] / 2, frameState.size[1] / 2,
resolution / viewState.resolution, resolution / viewState.resolution,
viewState.rotation,
(origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution);
tileLayerZ.setTransform(transform);
if (tileLayerZKey in newTileLayerZKeys) {
for (j = tileLayerZKey - 1; j >= 0; --j) {

12
src/ol/renderer/dom/domvectorlayerrenderer.js
View File

@@ -119,13 +119,11 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
var imageWidth = viewWidth * pixelRatio;
var imageHeight = viewHeight * pixelRatio;
var transform = ol.transform.reset(this.transform_);
ol.transform.translate(transform,
pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2);
ol.transform.scale(transform,
pixelRatio / viewResolution, -pixelRatio / viewResolution);
ol.transform.rotate(transform, -viewRotation);
ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]);
var transform = ol.transform.compose(this.transform_,
pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2,
pixelRatio / viewResolution, -pixelRatio / viewResolution,
-viewRotation,
-viewCenter[0], -viewCenter[1]);
var context = this.context_;

12
src/ol/renderer/maprenderer.js
View File

@@ -69,13 +69,13 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform;
goog.asserts.assert(coordinateToPixelTransform,
'frameState has a coordinateToPixelTransform');
ol.transform.translate(ol.transform.reset(coordinateToPixelTransform),
frameState.size[0] / 2, frameState.size[1] / 2);
ol.transform.scale(coordinateToPixelTransform,
1 / viewState.resolution, -1 / viewState.resolution);
ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation);
ol.transform.translate(coordinateToPixelTransform,
ol.transform.compose(coordinateToPixelTransform,
frameState.size[0] / 2, frameState.size[1] / 2,
1 / viewState.resolution, -1 / viewState.resolution,
-viewState.rotation,
-viewState.center[0], -viewState.center[1]);
ol.transform.invert(
ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
};

12
src/ol/source/imagevectorsource.js
View File

@@ -215,10 +215,14 @@ ol.source.ImageVector.prototype.getStyleFunction = function() {
* @private
*/
ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) {
var transform = ol.transform.reset(this.transform_);
ol.transform.translate(transform, size[0] / 2, size[1] / 2);
ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution);
return ol.transform.translate(transform, -center[0], -center[1]);
var dx1 = size[0] / 2;
var dy1 = size[1] / 2;
var sx = pixelRatio / resolution;
var sy = -sx;
var dx2 = -center[0];
var dy2 = -center[1];
return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
};