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