初始化加载的时候部分 Group 不展示
lijinke666 opened this issue · 1 comments
lijinke666 commented
xiaoiver commented
#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);