Fix stride related bug in Canvas immediate API

src/ol/geom/flat/transformflatgeom.js

@@ -5,13 +5,15 @@ goog.require('goog.vec.Mat4');
 
 /**
  * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
  * @param {number} stride Stride.
  * @param {goog.vec.Mat4.Number} transform Transform.
  * @param {Array.<number>=} opt_dest Destination.
  * @return {Array.<number>} Transformed coordinates.
  */
 ol.geom.flat.transform.transform2D =
-    function(flatCoordinates, stride, transform, opt_dest) {
+    function(flatCoordinates, offset, end, stride, transform, opt_dest) {
   var m00 = goog.vec.Mat4.getElement(transform, 0, 0);
   var m10 = goog.vec.Mat4.getElement(transform, 1, 0);
   var m01 = goog.vec.Mat4.getElement(transform, 0, 1);
@@ -21,7 +23,7 @@ ol.geom.flat.transform.transform2D =
   var dest = goog.isDef(opt_dest) ? opt_dest : [];
   var i = 0;
   var j, jj;
-  for (j = 0, jj = flatCoordinates.length; j < jj; j += stride) {
+  for (j = offset; j < end; j += stride) {
     var x = flatCoordinates[j];
     var y = flatCoordinates[j + 1];
     dest[i++] = m00 * x + m01 * y + m03;

src/ol/geom/simplegeometry.js

@@ -269,6 +269,7 @@ ol.geom.transformSimpleGeometry2D =
   } else {
     var stride = simpleGeometry.getStride();
     return ol.geom.flat.transform.transform2D(
-        flatCoordinates, stride, transform, opt_dest);
+        flatCoordinates, 0, flatCoordinates.length, stride,
+        transform, opt_dest);
   }
 };

src/ol/render/canvas/canvasimmediate.js

@@ -256,7 +256,8 @@ ol.render.canvas.Immediate.prototype.drawImages_ =
   goog.asserts.assert(offset === 0);
   goog.asserts.assert(end == flatCoordinates.length);
   var pixelCoordinates = ol.geom.flat.transform.transform2D(
-      flatCoordinates, 2, this.transform_, this.pixelCoordinates_);
+      flatCoordinates, offset, end, 2, this.transform_,
+      this.pixelCoordinates_);
   var context = this.context_;
   var localTransform = this.tmpLocalTransform_;
   var alpha = context.globalAlpha;
@@ -324,7 +325,8 @@ ol.render.canvas.Immediate.prototype.drawText_ =
   goog.asserts.assert(offset === 0);
   goog.asserts.assert(end == flatCoordinates.length);
   var pixelCoordinates = ol.geom.flat.transform.transform2D(
-      flatCoordinates, stride, this.transform_, this.pixelCoordinates_);
+      flatCoordinates, offset, end, stride, this.transform_,
+      this.pixelCoordinates_);
   var context = this.context_;
   for (; offset < end; offset += stride) {
     var x = pixelCoordinates[offset] + this.textOffsetX_;
@@ -354,41 +356,47 @@ ol.render.canvas.Immediate.prototype.drawText_ =
 
 
 /**
- * @param {Array.<number>} pixelCoordinates Pixel coordinates.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {number} end End.
+ * @param {number} stride Stride.
  * @param {boolean} close Close.
  * @private
  * @return {number} end End.
  */
 ol.render.canvas.Immediate.prototype.moveToLineTo_ =
-    function(pixelCoordinates, offset, end, close) {
+    function(flatCoordinates, offset, end, stride, close) {
   var context = this.context_;
-  context.moveTo(pixelCoordinates[offset], pixelCoordinates[offset + 1]);
+  var pixelCoordinates = ol.geom.flat.transform.transform2D(
+      flatCoordinates, offset, end, stride, this.transform_,
+      this.pixelCoordinates_);
+  context.moveTo(pixelCoordinates[0], pixelCoordinates[1]);
   var i;
-  for (i = offset + 2; i < end; i += 2) {
+  for (i = 2; i < pixelCoordinates.length; i += 2) {
     context.lineTo(pixelCoordinates[i], pixelCoordinates[i + 1]);
   }
   if (close) {
-    context.lineTo(pixelCoordinates[offset], pixelCoordinates[offset + 1]);
+    context.lineTo(pixelCoordinates[0], pixelCoordinates[1]);
   }
   return end;
 };
 
 
 /**
- * @param {Array.<number>} pixelCoordinates Pixel coordinates.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {Array.<number>} ends Ends.
+ * @param {number} stride Stride.
  * @private
  * @return {number} End.
  */
 ol.render.canvas.Immediate.prototype.drawRings_ =
-    function(pixelCoordinates, offset, ends) {
+    function(flatCoordinates, offset, ends, stride) {
   var context = this.context_;
   var i, ii;
   for (i = 0, ii = ends.length; i < ii; ++i) {
-    offset = this.moveToLineTo_(pixelCoordinates, offset, ends[i], true);
+    offset = this.moveToLineTo_(
+        flatCoordinates, offset, ends[i], stride, true);
     context.closePath(); // FIXME is this needed here?
   }
   return offset;
@@ -569,11 +577,11 @@ ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
   }
   if (!goog.isNull(this.strokeState_)) {
     this.setContextStrokeState_(this.strokeState_);
-    var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-        lineStringGeometry, this.transform_, this.pixelCoordinates_);
     var context = this.context_;
+    var flatCoordinates = lineStringGeometry.getFlatCoordinates();
     context.beginPath();
-    this.moveToLineTo_(pixelCoordinates, 0, pixelCoordinates.length, false);
+    this.moveToLineTo_(flatCoordinates, 0, flatCoordinates.length,
+        lineStringGeometry.getStride(), false);
     context.stroke();
   }
   if (this.text_ !== '') {
@@ -598,18 +606,18 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
   if (!ol.extent.intersects(this.extent_, geometryExtent)) {
     return;
   }
-  var pixelCoordinates;
   if (!goog.isNull(this.strokeState_)) {
     this.setContextStrokeState_(this.strokeState_);
-    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-        multiLineStringGeometry, this.transform_, this.pixelCoordinates_);
     var context = this.context_;
-    context.beginPath();
-    var ends = multiLineStringGeometry.getEnds();
+    var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
     var offset = 0;
+    var ends = multiLineStringGeometry.getEnds();
+    var stride = multiLineStringGeometry.getStride();
+    context.beginPath();
     var i, ii;
     for (i = 0, ii = ends.length; i < ii; ++i) {
-      offset = this.moveToLineTo_(pixelCoordinates, offset, ends[i], false);
+      offset = this.moveToLineTo_(
+          flatCoordinates, offset, ends[i], stride, false);
     }
     context.stroke();
   }
@@ -633,7 +641,6 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
   if (!ol.extent.intersects(this.extent_, polygonGeometry.getExtent())) {
     return;
   }
-  var pixelCoordinates;
   if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) {
     if (!goog.isNull(this.fillState_)) {
       this.setContextFillState_(this.fillState_);
@@ -641,11 +648,10 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
     if (!goog.isNull(this.strokeState_)) {
       this.setContextStrokeState_(this.strokeState_);
     }
-    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-        polygonGeometry, this.transform_, this.pixelCoordinates_);
     var context = this.context_;
     context.beginPath();
-    this.drawRings_(pixelCoordinates, 0, polygonGeometry.getEnds());
+    this.drawRings_(polygonGeometry.getOrientedFlatCoordinates(),
+        0, polygonGeometry.getEnds(), polygonGeometry.getStride());
     if (!goog.isNull(this.fillState_)) {
       context.fill();
     }
@@ -672,7 +678,6 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
   if (!ol.extent.intersects(this.extent_, multiPolygonGeometry.getExtent())) {
     return;
   }
-  var pixelCoordinates;
   if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) {
     if (!goog.isNull(this.fillState_)) {
       this.setContextFillState_(this.fillState_);
@@ -680,16 +685,16 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
     if (!goog.isNull(this.strokeState_)) {
       this.setContextStrokeState_(this.strokeState_);
     }
-    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-        multiPolygonGeometry, this.transform_, this.pixelCoordinates_);
     var context = this.context_;
-    var endss = multiPolygonGeometry.getEndss();
+    var flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
     var offset = 0;
+    var endss = multiPolygonGeometry.getEndss();
+    var stride = multiPolygonGeometry.getStride();
     var i, ii;
     for (i = 0, ii = endss.length; i < ii; ++i) {
       var ends = endss[i];
       context.beginPath();
-      offset = this.drawRings_(pixelCoordinates, offset, ends);
+      offset = this.drawRings_(flatCoordinates, offset, ends, stride);
       if (!goog.isNull(this.fillState_)) {
         context.fill();
       }

src/ol/render/canvas/canvasreplay.js

@@ -229,7 +229,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
     pixelCoordinates = this.pixelCoordinates_;
   } else {
     pixelCoordinates = ol.geom.flat.transform.transform2D(
-        this.coordinates, 2, transform, this.pixelCoordinates_);
+        this.coordinates, 0, this.coordinates.length, 2,
+        transform, this.pixelCoordinates_);
     goog.vec.Mat4.setFromArray(this.renderedTransform_, transform);
     goog.asserts.assert(pixelCoordinates === this.pixelCoordinates_);
   }
@@ -1932,7 +1933,8 @@ ol.render.canvas.ReplayGroup.prototype.replay_ = function(
   var maxX = maxExtent[2];
   var maxY = maxExtent[3];
   var flatClipCoords = ol.geom.flat.transform.transform2D(
-      [minX, minY, minX, maxY, maxX, maxY, maxX, minY], 2, transform);
+      [minX, minY, minX, maxY, maxX, maxY, maxX, minY],
+      0, 8, 2, transform);
   context.save();
   context.beginPath();
   context.moveTo(flatClipCoords[0], flatClipCoords[1]);