Merge pull request #5950 from ahocevar/fill-movewithview

Move gradient and pattern fills with the view

src/ol/render/canvas/polygonreplay.js

@@ -344,7 +344,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() {
   var miterLimit = state.miterLimit;
   if (fillStyle !== undefined && state.currentFillStyle != fillStyle) {
     this.instructions.push(
-        [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle]);
+        [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle, typeof fillStyle != 'string']);
     state.currentFillStyle = state.fillStyle;
   }
   if (strokeStyle !== undefined) {

src/ol/render/canvas/replay.js

@@ -58,6 +58,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
    */
   this.resolution = resolution;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.alignFill_ = false;
+
   /**
    * @private
    * @type {Array.<*>}
@@ -185,6 +191,19 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) {
 };
 
 
+ol.render.canvas.Replay.prototype.fill_ = function(context, transform, rotation) {
+  if (this.alignFill_) {
+    context.translate(transform[4], transform[5]);
+    context.rotate(rotation);
+  }
+  context.fill();
+  if (this.alignFill_) {
+    context.rotate(-rotation);
+    context.translate(-transform[4], -transform[5]);
+  }
+};
+
+
 /**
  * @private
  * @param {CanvasRenderingContext2D} context Context.
@@ -250,7 +269,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         break;
       case ol.render.canvas.Instruction.BEGIN_PATH:
         if (pendingFill > batchSize) {
-          context.fill();
+          this.fill_(context, transform, viewRotation);
           pendingFill = 0;
         }
         if (pendingStroke > batchSize) {
@@ -429,7 +448,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         if (batchSize) {
           pendingFill++;
         } else {
-          context.fill();
+          this.fill_(context, transform, viewRotation);
         }
         ++i;
         break;
@@ -467,8 +486,10 @@ ol.render.canvas.Replay.prototype.replay_ = function(
             ol.colorlike.isColorLike(instruction[1]),
             '2nd instruction should be a string, ' +
             'CanvasPattern, or CanvasGradient');
+        this.alignFill_ = instruction[2];
+
         if (pendingFill) {
-          context.fill();
+          this.fill_(context, transform, viewRotation);
           pendingFill = 0;
         }
 
@@ -534,7 +555,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
     }
   }
   if (pendingFill) {
-    context.fill();
+    this.fill_(context, transform, viewRotation);
   }
   if (pendingStroke) {
     context.stroke();