fix(g-canvas): clip animation should be effective, close #218

packages/g-base/src/abstract/element.ts

@@ -343,6 +343,7 @@ abstract class Element extends Base implements IElement {
   setClip(clipCfg: ClipCfg) {
     const preShape = this.get('clipShape');
     if (preShape) {
+      // 将之前的 clipShape 销毁
       preShape.destroy();
     }
     let clipShape = null;
@@ -359,11 +360,13 @@ abstract class Element extends Base implements IElement {
           type: clipCfg.type,
           isClipShape: true, // 增加一个标记
           attrs: clipCfg.attrs,
+          canvas, // 设置 canvas
         });
       }
     }
     this.set('clipShape', clipShape);
     this.onCanvasChange('clip');
+    return clipShape;
   }
 
   getClip(): IShape {

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

@@ -61,6 +61,7 @@ class ShapeBase extends AbstractShape {
     if (clip) {
       clip.createPath(context);
       context.clip();
+      clip._afterDraw(); // clip 绘制完成后，需要缓存包围盒以及清除标记
     }
   }
 

packages/g-canvas/__tests__/bugs/issue-202-spec.js → packages/g-canvas/tests/bugs/issue-202-spec.js

@@ -12,7 +12,7 @@ describe('#202', () => {
     height: 500,
   });
 
-  it.only('the transformation from canvas coordinates to relative coordinates should be effective', (done) => {
+  it('the transformation from canvas coordinates to relative coordinates should be effective', (done) => {
     const group = canvas.addGroup();
     const circle = group.addShape('circle', {
       attrs: {

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

@@ -0,0 +1,59 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { getColor } from '../get-color';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#218', () => {
+  const canvas = new Canvas({
+    container: dom,
+    pixelRatio: 1,
+    width: 500,
+    height: 500,
+  });
+  const context = canvas.get('context');
+
+  it('the animation of clip shape should be effective', (done) => {
+    const group = canvas.addGroup();
+    const shape = group.addShape('rect', {
+      attrs: {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        fill: 'red',
+      },
+    });
+    const clipShape = shape.setClip({
+      type: 'circle',
+      attrs: {
+        x: 150,
+        y: 150,
+        r: 20,
+      },
+    });
+    clipShape.animate(
+      {
+        r: 50,
+      },
+      {
+        duration: 500,
+      }
+    );
+    setTimeout(() => {
+      expect(getColor(context, 150, 150)).eqls('#ff0000');
+      expect(getColor(context, 150, 160)).eqls('#ff0000');
+      expect(getColor(context, 150, 190)).eqls('#000000');
+      setTimeout(() => {
+        expect(getColor(context, 150, 150)).eqls('#ff0000');
+        expect(getColor(context, 150, 160)).eqls('#ff0000');
+        expect(getColor(context, 150, 190)).eqls('#ff0000');
+        shape.setClip(null);
+        expect(clipShape.get('destroyed')).eqls(true);
+        done();
+      }, 600);
+    }, 25);
+  });
+});