fix(g-canvas): strokeText should be invoked before fillText for text, c…

…lose #298

packages/g-canvas/src/shape/text.ts

@@ -218,6 +218,36 @@ class Text extends ShapeBase {
     }
   }
 
+  // 复写绘制和填充的逻辑：对于文本，应该先绘制边框，再进行填充
+  strokeAndFill(context) {
+    const attrs = this.attrs;
+    const originOpacity = context.globalAlpha;
+
+    if (this.isStroke()) {
+      const lineWidth = attrs['lineWidth'];
+      if (lineWidth > 0) {
+        const strokeOpacity = attrs['strokeOpacity'];
+        if (!isNil(strokeOpacity) && strokeOpacity !== 1) {
+          context.globalAlpha = strokeOpacity;
+        }
+        this.stroke(context);
+      }
+    }
+
+    if (this.isFill()) {
+      const fillOpacity = attrs['fillOpacity'];
+      if (!isNil(fillOpacity) && fillOpacity !== 1) {
+        context.globalAlpha = fillOpacity;
+        this.fill(context);
+        context.globalAlpha = originOpacity;
+      } else {
+        this.fill(context);
+      }
+    }
+
+    this.afterDrawPath(context);
+  }
+
   // 复写填充逻辑
   fill(context) {
     this._drawText(context, true);

packages/g-canvas/tests/bugs/issue-273-spec.js

@@ -18,7 +18,7 @@ describe('#273', () => {
         x: 100,
         y: 100,
         r: 100,
-        fill: 'fill',
+        fill: 'red',
         matrix: [1, 0, 0, 0, 1, 0, 20, 20, 1],
       },
     });

packages/g-canvas/tests/bugs/issue-298-spec.js

@@ -0,0 +1,37 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { getTextColorCount } from '../get-color';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#298', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 600,
+    height: 600,
+    pixelRatio: 1,
+  });
+  const context = canvas.get('context');
+
+  it('strokeText should be invoked before fillText for text', (done) => {
+    canvas.addShape('text', {
+      attrs: {
+        x: 10,
+        y: 100,
+        text: 'G 4.0 的文本效果',
+        fill: 'blue',
+        stroke: 'red',
+        lineWidth: 5,
+        fontSize: 20,
+        textBaseline: 'top',
+      },
+    });
+    setTimeout(() => {
+      expect(getTextColorCount(context, 10, 110, 20, '#ff0000') > 0).eqls(true);
+      expect(getTextColorCount(context, 10, 110, 20, '#0000ff') > 0).eqls(true);
+      done();
+    }, 25);
+  });
+});