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

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_);
-  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);
 };
 
 

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 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);
 };
 
 

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_);
-    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) {

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);
-      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;
     }

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,
-        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

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_);
-    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);

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.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) {

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_);
-  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_;
 

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.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));
 };