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

src/ol/render/canvas/canvasimmediate.js

@@ -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.compose(localTransform,
-      ol.transform.scale(localTransform, this.imageScale_, this.imageScale_);
+          centerX, centerY,
-      ol.transform.rotate(localTransform, rotation);
+          this.imageScale_, this.imageScale_,
-      ol.transform.translate(localTransform, -centerX, -centerY);
+          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_);
+      var localTransform = ol.transform.compose(this.tmpLocalTransform_,
-      ol.transform.translate(localTransform, x, y);
+          x, y,
-      ol.transform.scale(localTransform, this.textScale_, this.textScale_);
+          this.textScale_, this.textScale_,
-      ol.transform.rotate(localTransform, this.textRotation_);
+          this.textRotation_,
-      ol.transform.translate(localTransform, -x, -y);
+          -x, -y);
       context.setTransform.apply(context, localTransform);
     }
     if (this.textStrokeState_) {

src/ol/render/canvas/canvasreplay.js

@@ -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.compose(localTransform,
-            ol.transform.scale(localTransform, scale, scale);
+                centerX, centerY, scale, scale, rotation, -centerX, -centerY);
-            ol.transform.rotate(localTransform, rotation);
-            ol.transform.translate(localTransform, -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.compose(localTransform, x, y, scale, scale, rotation, -x, -y);
-            ol.transform.scale(localTransform, scale, scale);
-            ol.transform.rotate(localTransform, rotation);
-            ol.transform.translate(localTransform, -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_);
+  var transform = ol.transform.compose(this.hitDetectionTransform_,
-  ol.transform.translate(transform, 0.5, 0.5);
+      0.5, 0.5,
-  ol.transform.scale(transform, 1 / resolution, -1 / resolution);
+      1 / resolution, -1 / resolution,
-  ol.transform.rotate(transform, -rotation);
+      -rotation,
-  ol.transform.translate(transform, -coordinate[0], -coordinate[1]);
+      -coordinate[0], -coordinate[1]);
 
   var context = this.hitDetectionContext_;
   context.clearRect(0, 0, 1, 1);

src/ol/renderer/canvas/canvaslayerrenderer.js

@@ -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_);
+  var dx1 = pixelRatio * frameState.size[0] / 2;
-  ol.transform.translate(transform,
+  var dy1 = pixelRatio * frameState.size[1] / 2;
-      pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2);
+  var sx = pixelRatio / viewState.resolution;
-  ol.transform.scale(transform,
+  var sy = -sx;
-      pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
+  var angle = -viewState.rotation;
-  ol.transform.rotate(transform, -viewState.rotation);
+  var dx2 = -viewState.center[0] + offsetX;
-  return ol.transform.translate(transform,
+  var dy2 = -viewState.center[1];
-      -viewState.center[0] + offsetX, -viewState.center[1]);
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
 };
 
 

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -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 dx1 = this.canvas_.width / 2;
-  var transform = ol.transform.reset(this.transform_);
+  var dy1 = this.canvas_.height / 2;
-  ol.transform.translate(transform,
+  var sx = frameState.pixelRatio / viewState.resolution;
-      this.canvas_.width / 2, this.canvas_.height / 2);
+  var sy = -sx;
-  ol.transform.scale(transform,
+  var angle = -viewState.rotation;
-      pixelRatio / resolution, -pixelRatio / resolution);
+  var dx2 = -viewState.center[0];
-  ol.transform.rotate(transform, -viewState.rotation);
+  var dy2 = -viewState.center[1];
-  return ol.transform.translate(transform,
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
-      -viewState.center[0], -viewState.center[1]);
 };
 
 

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -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_);
+    var imageTransform = ol.transform.compose(this.imageTransform_,
-    ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY);
+        drawSize / 2 - dX, drawSize / 2 - dY,
-    ol.transform.scale(imageTransform, pixelScale, -pixelScale);
+        pixelScale, -pixelScale,
-    ol.transform.rotate(imageTransform, -rotation);
+        -rotation,
-    ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
+        -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
     this.dispatchRenderEvent(renderContext, frameState, imageTransform);
   }
   if (rotation || hasRenderListeners) {

src/ol/renderer/canvas/canvasvectortilelayerrenderer.js

@@ -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);
+      tileTransform = ol.transform.compose(this.tmpTransform_,
-      ol.transform.scale(tileTransform,
+          offsetX, offsetY,
-          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
+          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
-      ol.transform.rotate(tileTransform, rotation);
+          rotation,
-      ol.transform.translate(tileTransform,
+          (origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution);
-          (origin[0] - center[0]) / tilePixelResolution,
-          (center[1] - origin[1]) / tilePixelResolution);
     } else {
       tileTransform = transform;
     }

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -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,
+    ol.transform.compose(transform,
-        frameState.size[0] / 2, frameState.size[1] / 2);
+        frameState.size[0] / 2, frameState.size[1] / 2,
-    ol.transform.scale(transform,
+        imageResolution / viewResolution, imageResolution / viewResolution,
-        imageResolution / viewResolution, imageResolution / viewResolution);
+        viewRotation,
-    ol.transform.rotate(transform, viewRotation);
-    ol.transform.translate(transform,
         (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

src/ol/renderer/dom/dommaprenderer.js

@@ -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_);
+    var transform = ol.transform.compose(this.transform_,
-    ol.transform.translate(transform, canvas.width / 2, canvas.height / 2);
+        canvas.width / 2, canvas.height / 2,
-    ol.transform.scale(transform,
+        pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution,
-        pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
+        -rotation,
-    ol.transform.rotate(transform, -viewState.rotation);
-    ol.transform.translate(transform,
         -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);

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -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.compose(transform,
-    ol.transform.scale(transform,
+        frameState.size[0] / 2, frameState.size[1] / 2,
-        resolution / viewState.resolution, resolution / viewState.resolution);
+        resolution / viewState.resolution, resolution / viewState.resolution,
-    ol.transform.rotate(transform,  viewState.rotation);
+        viewState.rotation,
-    ol.transform.translate(transform,
         (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution);
+
     tileLayerZ.setTransform(transform);
     if (tileLayerZKey in newTileLayerZKeys) {
       for (j = tileLayerZKey - 1; j >= 0; --j) {

src/ol/renderer/dom/domvectorlayerrenderer.js

@@ -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_);
+  var transform = ol.transform.compose(this.transform_,
-  ol.transform.translate(transform,
+      pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2,
-      pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2);
+      pixelRatio / viewResolution, -pixelRatio / viewResolution,
-  ol.transform.scale(transform,
+      -viewRotation,
-      pixelRatio / viewResolution, -pixelRatio / viewResolution);
+      -viewCenter[0], -viewCenter[1]);
-  ol.transform.rotate(transform, -viewRotation);
-  ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]);
 
   var context = this.context_;
 

src/ol/renderer/maprenderer.js

@@ -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.compose(coordinateToPixelTransform,
-  ol.transform.scale(coordinateToPixelTransform,
+      frameState.size[0] / 2, frameState.size[1] / 2,
-      1 / viewState.resolution, -1 / viewState.resolution);
+      1 / viewState.resolution, -1 / viewState.resolution,
-  ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation);
+      -viewState.rotation,
-  ol.transform.translate(coordinateToPixelTransform,
       -viewState.center[0], -viewState.center[1]);
+
   ol.transform.invert(
       ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
 };

src/ol/source/imagevectorsource.js

@@ -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_);
+  var dx1 = size[0] / 2;
-  ol.transform.translate(transform, size[0] / 2, size[1] / 2);
+  var dy1 = size[1] / 2;
-  ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution);
+  var sx = pixelRatio / resolution;
-  return ol.transform.translate(transform, -center[0], -center[1]);
+  var sy = -sx;
+  var dx2 = -center[0];
+  var dy2 = -center[1];
+
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
 };