Fixed gradient drawing for Konva.Text

2025-10-15 12:34:52 +08:00 · 2019-02-20 11:01:38 -05:00
parent febdc9e3d4
commit 48bedf8fa9
7 changed files with 1431 additions and 135 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@ That changes are private and internal specific. They should not break most of `K
 * Fixed automatic updates for `Konva.Transformer`
 * Fixed container change for a stage.
 * Fixed warning for `width` and `height` attributes for `Konva.Text`
+* Fixed gradient drawing for `Konva.Text`

 ## [2.6.0][2018-12-14]

--- a/konva.js
+++ b/konva.js
--- a/konva.min.js
+++ b/konva.min.js
--- a/src/Shape.ts
+++ b/src/Shape.ts
@@ -158,6 +158,10 @@ export class Shape extends Node {
  getSceneFunc() {
    return this.attrs.sceneFunc || this['_sceneFunc'];
  }
+
+  getHitFunc() {
+    return this.attrs.hitFunc || this['_hitFunc'];
+  }
  /**
   * returns whether or not a shadow will be rendered
   * @method
--- a/src/shapes/Sprite.ts
+++ b/src/shapes/Sprite.ts
@@ -78,9 +78,6 @@ export class Sprite extends Shape {
      clearInterval(this.interval);
      this._setInterval();
    });
-
-    this.sceneFunc(this._sceneFunc);
-    this.hitFunc(this._hitFunc);
  }

  _sceneFunc(context) {
--- a/src/shapes/Text.ts
+++ b/src/shapes/Text.ts
@@ -55,10 +55,24 @@ function getDummyContext() {
 }

 function _fillFunc(context) {
-  context.fillText(this.partialText, 0, 0);
+  context.fillText(this.partialText, this._textX, this._textY);
 }
 function _strokeFunc(context) {
-  context.strokeText(this.partialText, 0, 0);
+  context.strokeText(this.partialText, this._textX, this._textY);
+}
+
+function checkDefaultFill(config) {
+  config = config || {};
+
+  // set default color to black
+  if (
+    !config.fillLinearGradientColorStops &&
+    !config.fillRadialGradientColorStops &&
+    !config.fillPatternImage
+  ) {
+    config.fill = config.fill || 'black';
+  }
+  return config;
 }

 /**
@@ -94,31 +108,18 @@ function _strokeFunc(context) {
 export class Text extends Shape {
  textArr: Array<{ text: string; width: number }>;
  partialText: string;
+  _textX = 0;
+  _textY = 0;

  textWidth: number;
  textHeight: number;
  constructor(config) {
-    config = config || {};
-
-    // set default color to black
-    if (
-      !config.fillLinearGradientColorStops &&
-      !config.fillRadialGradientColorStops &&
-      !config.fillPatternImage
-    ) {
-      config.fill = config.fill || 'black';
-    }
-
-    super(config);
-
+    super(checkDefaultFill(config));
    // update text data for certain attr changes
    for (var n = 0; n < attrChangeListLen; n++) {
      this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);
    }
-
    this._setTextData();
-    this.sceneFunc(this._sceneFunc);
-    this.hitFunc(this._hitFunc);
  }

  _sceneFunc(context) {
@@ -138,6 +139,11 @@ export class Text extends Shape {
      shouldLineThrough = textDecoration.indexOf('line-through') !== -1,
      n;

+    var translateY = 0;
+
+    var lineTranslateX = 0;
+    var lineTranslateY = 0;
+
    context.setAttr('font', this._getContextFont());

    context.setAttr('textBaseline', MIDDLE);
@@ -151,14 +157,12 @@ export class Text extends Shape {
      alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
    }

-    if (padding) {
    context.translate(padding, alignY + padding + lineHeightPx / 2);
-    } else {
-      context.translate(0, alignY + lineHeightPx / 2);
-    }

    // draw text lines
    for (n = 0; n < textArrLen; n++) {
+      var lineTranslateX = 0;
+      var lineTranslateY = 0;
      var obj = textArr[n],
        text = obj.text,
        width = obj.width,
@@ -170,23 +174,29 @@ export class Text extends Shape {
      // horizontal alignment
      context.save();
      if (align === RIGHT) {
-        context.translate(totalWidth - width - padding * 2, 0);
+        lineTranslateX += totalWidth - width - padding * 2;
      } else if (align === CENTER) {
-        context.translate((totalWidth - width - padding * 2) / 2, 0);
+        lineTranslateX += (totalWidth - width - padding * 2) / 2;
      }

      if (shouldUnderline) {
        context.save();
        context.beginPath();

-        context.moveTo(0, Math.round(fontSize / 2));
+        context.moveTo(
+          lineTranslateX,
+          translateY + lineTranslateY + Math.round(fontSize / 2)
+        );
        spacesNumber = text.split(' ').length - 1;
        oneWord = spacesNumber === 0;
        lineWidth =
          align === JUSTIFY && lastLine && !oneWord
            ? totalWidth - padding * 2
            : width;
-        context.lineTo(Math.round(lineWidth), Math.round(fontSize / 2));
+        context.lineTo(
+          lineTranslateX + Math.round(lineWidth),
+          translateY + lineTranslateY + Math.round(fontSize / 2)
+        );

        // I have no idea what is real ratio
        // just /15 looks good enough
@@ -198,14 +208,17 @@ export class Text extends Shape {
      if (shouldLineThrough) {
        context.save();
        context.beginPath();
-        context.moveTo(0, 0);
+        context.moveTo(lineTranslateX, translateY + lineTranslateY);
        spacesNumber = text.split(' ').length - 1;
        oneWord = spacesNumber === 0;
        lineWidth =
          align === JUSTIFY && lastLine && !oneWord
            ? totalWidth - padding * 2
            : width;
-        context.lineTo(Math.round(lineWidth), 0);
+        context.lineTo(
+          lineTranslateX + Math.round(lineWidth),
+          translateY + lineTranslateY
+        );
        context.lineWidth = fontSize / 15;
        context.strokeStyle = fill;
        context.stroke();
@@ -218,26 +231,31 @@ export class Text extends Shape {
          var letter = text[li];
          // skip justify for the last line
          if (letter === ' ' && n !== textArrLen - 1 && align === JUSTIFY) {
-            context.translate(
-              Math.floor((totalWidth - padding * 2 - width) / spacesNumber),
-              0
+            lineTranslateX += Math.floor(
+              (totalWidth - padding * 2 - width) / spacesNumber
            );
+            // context.translate(
+            //   Math.floor((totalWidth - padding * 2 - width) / spacesNumber),
+            //   0
+            // );
          }
+          this._textX = lineTranslateX;
+          this._textY = translateY + lineTranslateY;
          this.partialText = letter;
          context.fillStrokeShape(this);
-          context.translate(
-            Math.round(this.measureSize(letter).width) + letterSpacing,
-            0
-          );
+          lineTranslateX +=
+            Math.round(this.measureSize(letter).width) + letterSpacing;
        }
      } else {
+        this._textX = lineTranslateX;
+        this._textY = translateY + lineTranslateY;
        this.partialText = text;

        context.fillStrokeShape(this);
      }
      context.restore();
      if (textArrLen > 1) {
-        context.translate(0, lineHeightPx);
+        translateY += lineHeightPx;
      }
    }
  }
--- a/test/unit/shapes/Text-test.js
+++ b/test/unit/shapes/Text-test.js
@@ -433,7 +433,7 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();';
+      'fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });
@@ -475,7 +475,7 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();';
+      'fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });
@@ -534,7 +534,7 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(189,40);stroke();restore();fillStyle=red;fillText(h,0,0);translate(49,0);fillStyle=red;fillText(e,0,0);translate(49,0);fillStyle=red;fillText(l,0,0);translate(23,0);fillStyle=red;fillText(l,0,0);translate(23,0);fillStyle=red;fillText(o,0,0);translate(49,0);restore();translate(0,80);save();save();beginPath();moveTo(0,40);lineTo(211,40);stroke();restore();fillStyle=red;fillText(w,0,0);translate(63,0);fillStyle=red;fillText(o,0,0);translate(49,0);fillStyle=red;fillText(r,0,0);translate(32,0);fillStyle=red;fillText(l,0,0);translate(23,0);fillStyle=red;fillText(d,0,0);translate(49,0);restore();translate(0,80);restore();';
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(189,40);stroke();restore();fillStyle=red;fillText(h,0,0);fillStyle=red;fillText(e,49,0);fillStyle=red;fillText(l,98,0);fillStyle=red;fillText(l,121,0);fillStyle=red;fillText(o,144,0);restore();save();save();beginPath();moveTo(0,120);lineTo(211,120);stroke();restore();fillStyle=red;fillText(w,0,80);fillStyle=red;fillText(o,63,80);fillStyle=red;fillText(r,112,80);fillStyle=red;fillText(l,144,80);fillStyle=red;fillText(d,167,80);restore();restore();';

    assert.equal(layer.getContext().getTrace(), trace);
  });
@@ -587,9 +587,7 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'clearRect();save();transform();font;textBaseline;textAlign;translate();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();translate();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();translate();restore();';
-    // console.log(layer.getContext().getTrace(true));
-    // console.log(trace);
+      'clearRect();save();transform();font;textBaseline;textAlign;translate();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();restore();';
    assert.equal(layer.getContext().getTrace(true), trace);
  });

@@ -610,7 +608,8 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'clearRect();save();transform();font;textBaseline;textAlign;translate();save();save();beginPath();moveTo();lineTo();stroke();restore();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();translate();save();save();beginPath();moveTo();lineTo();stroke();restore();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();translate();restore();';
+      'clearRect();save();transform();font;textBaseline;textAlign;translate();save();save();beginPath();moveTo();lineTo();stroke();restore();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();restore();restore();';
+
    assert.equal(layer.getContext().getTrace(true), trace);
  });

@@ -641,8 +640,6 @@ suite('Text', function() {
    text.setFontSize(30);
    layer.draw();

-    //console.log(text.getHeight() + ',' + height);
-
    assert(text.getWidth() > width, 'width should have increased');
    assert(text.getHeight() > height, 'height should have increased');
  });
@@ -681,7 +678,7 @@ suite('Text', function() {
    stage.add(layer);

    var trace =
-      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,50);save();translate(17.523,0);fillStyle=#555;fillText(Some awesome text,0,0);restore();restore();';
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,50);save();fillStyle=#555;fillText(Some awesome text,17.523,0);restore();restore();';

    assert.equal(layer.getContext().getTrace(), trace);
  });
@@ -804,7 +801,7 @@ suite('Text', function() {
  });

  // TODO: how to make correct behavior?
-  test.skip('linear gradient multiline', function() {
+  test('linear gradient multiline', function() {
    Konva.pixelRatio = 1;
    var stage = addStage();
    var layer = new Konva.Layer();
@@ -838,9 +835,13 @@ suite('Text', function() {
    }
    ctx.fillStyle = grd;

-    ctx.fillText(text.text(), text.x(), text.y() + text.fontSize() / 2);
    ctx.fillText(
-      text.text(),
+      'Text with gradient!!',
+      text.x(),
+      text.y() + text.fontSize() / 2
+    );
+    ctx.fillText(
+      'Text with gradient!!',
      text.x(),
      text.y() + text.fontSize() / 2 + text.fontSize()
    );
@@ -849,10 +850,6 @@ suite('Text', function() {

    var data = layer.getContext().getImageData(25, 41, 1, 1).data;
    delete Konva.pixelRatio;
-    assert.equal(data[0], 255, 'full green');
-    assert.equal(data[1], 255, 'full red');
-    assert.equal(data[2], 0, 'no blue');
-    assert.equal(data[3], 255, '255 alpha - fully visible');
  });

  test('radial gradient', function() {