antvis/G

初始化加载的时候部分 Group 不展示

lijinke666 opened this issue · 1 comments

Kapture 2024-03-15 at 15 25 02

image

表现很奇怪, S2 的 Icon 继承的 Group, 然后通过常规 appendChild 的方式添加到表格上, 但在初始化渲染时, 部分 icon 不展示, 重新渲染一次则正常, 怀疑是 G 的问题. 复现地址相关 Issue

版本信息:

"@antv/g": "^5.18.25"
"@antv/g-canvas": "^1.11.27"

#1325 修复了 Canvas 渲染下 Image 加载配合 ClipPath 展示不全的 bug,此时传入 Image 的是字符串,G 内部负责请求加载。

但如果使用 window.Image 外部请求加载后再传入,还是会出现类似问题。
最小复现代码如下:

const rect = new Rect({
  style: {
    x: 0,
    y: 0,
    width: 400,
    height: 400,
  },
});
const group = new Group({
  style: {
    clipPath: rect,
  },
});
canvas.appendChild(group);

const image = new Image({
  style: {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  },
});
const image2 = new Image({
  style: {
    x: 50,
    y: 0,
    width: 100,
    height: 100,
  },
});

const img = new window.Image();
img.onload = () => {
  image.style.img = img;
  image2.style.img = img;
  group.appendChild(image);
  group.appendChild(image2);
};
img.src =
  'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_aqoS73Se3sAAAAAAAAAAAAAARQnAQ';
img.crossOrigin = 'anonymous';

// 这样就不会有问题
const img = 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_aqoS73Se3sAAAAAAAAAAAAAARQnAQ';
image.style.img = img;
image2.style.img = img;
group.appendChild(image);
group.appendChild(image2);