【v5】自定义形状， 在 animate 为 false 时的错误问题。

[ai-qing-hai]

在更新 size 图表大小时，自定义形状如果 animate 的配置为 false 时，会出现问题。

import { Chart, register } from '@antv/g2';

register('shape.interval.customShape', customShape);

function customShape(o, con) {
  return (points) => {
    const { document } = con.canvas;
    const g = document.createElement('g', {});

    const centerX = (points[0][0] + points[1][0]) / 2;
    const w = points[1][0] - points[0][0];

    const h1 = points[0][1] - w / 4;
    const h2 = points[0][1] + w / 4;

    const g1 = points[2][1] + w / 4;

    const t1 = document.createElement('path', {
      style: {
        path: [
          ['M', ...points[0]],
          ['C',
            ...points[0],
            points[0][0],
            h2,
            centerX,
            h2,
          ],
          ['C',
            centerX,
            h2,
            points[1][0],
            h2,
            ...points[1],
          ],
          ['L', ...points[2]],
          ['C',
            ...points[2],
            points[2][0],
            g1,
            centerX,
            g1,
          ],
          ['C',
            centerX,
            g1,
            points[0][0],
            g1,
            ...points[3],
          ],
          ['Z']
        ],
        fill: 'rgba(255, 0, 0, 0.75)'
      }
    });

    const r = document.createElement('path', {
      style: {
        path: [
          ['M', ...points[0]],
          ['C',
            ...points[0],
            points[0][0],
            h1,
            centerX,
            h1,
          ],
          ['C',
            centerX,
            h1,
            points[1][0],
            h1,
            ...points[1],
          ],
          ['C',
            ...points[1],
            points[1][0],
            h2,
            centerX,
            h2
          ],
          ['C',
            centerX,
            h2,
            points[0][0],
            h2,
            ...points[0],
          ],
          ['Z']
        ],
        fill: 'rgba(255, 0, 0, 0.4)'
      }
    });

    g.appendChild(t1);
    g.appendChild(r);

    return g;
  }
}
const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .encode('key','letter')
  .encode('x', 'letter')
  .encode('y', 'frequency')
  .encode('shape', 'customShape')
  .axis('y', { labelFormatter: '.0%' })
  .animate(false);



chart.render();

[hustcc]

设置 animate 为 false 的时候，在 resize 画布的时候，自定义图形没有办法清除，带来泄漏！

[pearmini]

shape 的 API 接口其实有点问题，之后可能需要处理一下，不过这个问题应该解决。