diff --git a/src/geometry/element/index.ts b/src/geometry/element/index.ts index 14c7ef6944..09f00360ec 100644 --- a/src/geometry/element/index.ts +++ b/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'); diff --git a/tests/bugs/2798-spec.ts b/tests/bugs/2798-spec.ts new file mode 100644 index 0000000000..bb32a79a07 --- /dev/null +++ b/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); + }); +});