fix(offscreen): sync clip style in offscreen group (#2795)

* fix(offscreen): sync clip style in offscreen group

* test(clip): add testcase

* fix: fix ci fail by animate

src/geometry/element/index.ts

@@ -431,6 +431,14 @@ export default class Element extends Base {
     animateCfg,
     index: number = 0
   ) {
+    // 所有的 shape 都需要同步 clip
+    const clip = sourceShape.get('clipShape');
+    const newClip = targetShape.get('clipShape');
+
+    if (clip && newClip) {
+      this.syncShapeStyle(clip, newClip, state, animateCfg);
+    }
+
     if (sourceShape.isGroup()) {
       const children = sourceShape.get('children');
       const newChildren = targetShape.get('children');

tests/bugs/2798-spec.ts

@@ -0,0 +1,61 @@
+import { Chart, registerShape } from '../../src';
+import { createDiv } from '../util/dom';
+
+registerShape('interval', '2798-shape', {
+  draw(cfg, container) {
+    const center = this.parsePoint({ x: 0.5, y: 0.5 });
+    container.setClip({
+      type: 'circle',
+      attrs: {
+        x: center.x,
+        y: center.y,
+        r: 50,
+      },
+    });
+
+    container.addShape('rect', {
+      name: 'rect',
+      attrs: {
+        x: 0,
+        y: 0,
+        width: 400,
+        height: 300,
+        fill: 'red',
+      },
+    });
+
+    return container;
+  }
+})
+
+describe('2798', () => {
+  it('2798', () => {
+    const data = [
+      { type: '一线城市', value: 0.19 },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 300,
+      autoFit: false,
+    });
+    chart.data(data);
+    chart
+      .interval()
+      .position('type*value')
+      .shape('2798-shape')
+
+    chart.legend(false);
+    chart.axis(false);
+    chart.tooltip(false);
+    chart.animate(false);
+
+    chart.render();
+
+    expect(chart.middleGroup.getChildren()[0].get('clipShape').attr('x')).toBe(200);
+
+    chart.changeSize(600, 300);
+
+    expect(chart.middleGroup.getChildren()[0].get('clipShape').attr('x')).toBe(300);
+  });
+});