diff --git a/packages/g-canvas/src/shape/marker.ts b/packages/g-canvas/src/shape/marker.ts index c784429d5..f55e21641 100644 --- a/packages/g-canvas/src/shape/marker.ts +++ b/packages/g-canvas/src/shape/marker.ts @@ -47,8 +47,8 @@ class Marker extends ShapeBase { // 更新属性时,检测是否更改了 path onAttrChange(name: string, value: any, originValue: any) { super.onAttrChange(name, value, originValue); - if (name === 'symbol') { - // symbol 更改时,清理缓存 + if (['symbol', 'x', 'y', 'r'].indexOf(name) !== -1) { + // path 相关属性更改时,清理缓存 this._resetParamsCache(); } } diff --git a/packages/g-canvas/tests/bugs/issue-236-spec.js b/packages/g-canvas/tests/bugs/issue-236-spec.js new file mode 100644 index 000000000..81e3f048d --- /dev/null +++ b/packages/g-canvas/tests/bugs/issue-236-spec.js @@ -0,0 +1,50 @@ +const expect = require('chai').expect; +import Canvas from '../../src/canvas'; + +const dom = document.createElement('div'); +document.body.appendChild(dom); +dom.id = 'c1'; + +describe('#236', () => { + const canvas = new Canvas({ + container: dom, + width: 600, + height: 600, + }); + + it('animation for marker should be effective', (done) => { + const shape = canvas.addShape('marker', { + attrs: { + lineWidth: 1, + fill: '#1890ff', + r: 16.6, + opacity: 0.3, + x: 247.22381317138678, + y: 153.66500000000002, + symbol: 'circle', + }, + }); + + shape.animate( + { + fill: '#1890ff', + lineWidth: 1, + opacity: 0.3, + r: 16.6, + stroke: '#1890ff', + symbol: 'circle', + x: 457.20191545758945, + y: 153.66500000000002, + }, + { + duration: 100, + } + ); + + setTimeout(() => { + expect(shape.attr('x')).eqls(457.20191545758945); + expect(shape.attr('y')).eqls(153.66500000000002); + done(); + }, 120); + }); +});