update CHANGELOG with new version

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 4.0.6  - 2019-08-31
+
+* Fix fillPatternScale for text
+
 ## 4.0.5  - 2019-08-17
 
 * Fix `dragstart` flow when `node.startDrag()` is called.

src/Context.ts

@@ -664,8 +664,6 @@ export class SceneContext extends Context {
   _fillPattern(shape) {
     var fillPatternX = shape.getFillPatternX(),
       fillPatternY = shape.getFillPatternY(),
-      fillPatternScaleX = shape.getFillPatternScaleX(),
-      fillPatternScaleY = shape.getFillPatternScaleY(),
       fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
       fillPatternOffsetX = shape.getFillPatternOffsetX(),
       fillPatternOffsetY = shape.getFillPatternOffsetY();
@@ -678,9 +676,6 @@ export class SceneContext extends Context {
       this.rotate(fillPatternRotation);
     }
 
-    if (fillPatternScaleX || fillPatternScaleY) {
-      this.scale(fillPatternScaleX, fillPatternScaleY);
-    }
     if (fillPatternOffsetX || fillPatternOffsetY) {
       this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
     }

src/Shape.ts

@@ -81,7 +81,7 @@ var linearGradient = 'linearGradient';
 var radialGradient = 'radialGradient';
 
 var dummyContext;
-function getDummyContext() {
+function getDummyContext(): CanvasRenderingContext2D {
   if (dummyContext) {
     return dummyContext;
   }
@@ -193,7 +193,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
     );
 
     this.on(
-      'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva',
+      'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva',
       _clearFillPatternCache
     );
 
@@ -261,10 +261,20 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
   __getFillPattern() {
     if (this.fillPatternImage()) {
       var ctx = getDummyContext();
-      return ctx.createPattern(
+      const pattern = ctx.createPattern(
         this.fillPatternImage(),
         this.fillPatternRepeat() || 'repeat'
       );
+      pattern.setTransform({
+        a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
+        b: 0, // Vertical skewing.
+        c: 0, // Horizontal skewing.
+        d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
+        e: 0, // Horizontal translation (moving).
+        f: 0 // Vertical translation (moving).
+      });
+      // pattern.setTransform
+      return pattern;
     }
   }
   _getLinearGradient() {
@@ -281,7 +291,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
 
       // build color stops
       for (var n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
       }
       return grd;
     }
@@ -308,7 +318,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
 
       // build color stops
       for (var n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
       }
       return grd;
     }

test/unit/shapes/Text-test.js

@@ -1006,4 +1006,48 @@ suite('Text', function() {
     };
     imageObj.src = 'assets/darth-vader.jpg';
   });
+
+  test('image gradient for text with scale', function(done) {
+    Konva.pixelRatio = 1;
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var stage = addStage();
+      var layer = new Konva.Layer();
+
+      var text = new Konva.Text({
+        text: 'Hello, this is some good text',
+        fontSize: 30,
+        fillPatternImage: imageObj,
+        fillPatternScaleX: 0.5,
+        fillPatternScaleY: 0.5
+      });
+      layer.add(text);
+      stage.add(layer);
+
+      var canvas = createCanvas();
+      var ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'green';
+      ctx.font = 'normal normal 30px Arial';
+      ctx.textBaseline = 'middle';
+
+      var grd = ctx.createPattern(imageObj, 'repeat');
+      grd.setTransform({
+        a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
+        b: 0, // Vertical skewing.
+        c: 0, // Horizontal skewing.
+        d: 0.5, // Vertical scaling. A value of 1 results in no scaling.
+        e: 0, // Horizontal translation (moving).
+        f: 0 // Vertical translation (moving).
+      });
+      ctx.fillStyle = grd;
+
+      ctx.fillText(text.text(), 0, 15);
+
+      compareLayerAndCanvas(layer, canvas, 200);
+      delete Konva.pixelRatio;
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
 });