Canvas2D: Multiple readback operations using getImageData #5698

问题描述

控制台提示：

重现链接

No response

重现步骤

<template>
  <div>
    <div ref="container"></div>
    <button @click="onClick">Update Data</button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Chart } from '@antv/g2';

let chart;
const container = ref(null);

onMounted(() => {
  chart = renderBarChart(container.value);
});

function onClick() {
  updateBarChart(chart);
}

function renderBarChart(container) {
  const chart = new Chart({
    container,
    theme: 'classic',
    height: 200, 

  });

  // 准备数据
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // 声明可视化
  chart
    .interval() // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'genre') // 编码 x 通道
    .encode('y', 'sold') // 编码 y 通道
    .encode('key', 'genre'); // 指定 key

  // 渲染可视化
  chart.render();

  return chart;
}

function updateBarChart(chart) {
  // 获得 Interval Mark
  const interval = chart.getNodesByType('interval')[0];

  // 模拟并且更新 Interval 的数据
  const newData = interval.data().map(d => ({
    ...d,
    sold: Math.random() * 200 + 100,
  }));

  interval.data(newData);

  // 重新渲染
  chart.render();
}
</script>

<style lang="less" scoped></style>

预期行为

是否如 https://github.com/antvis/G/pull/1370

进行代码修复方式

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response