Canvas 2D将几张图片画成一张时,安卓无法画出来,IOS和开发工具没有问题?
安卓在绘制图片时,底图成功,素材没有绘制上去。ios和开发工具没有问题。 代码片段: // 绘制底图
const res = await getImgInfo(imageUrl.value);
const image = canvas.createImage()
image.src = res.path
image.onload = () => {
maskCanvasInfo.drawImage(image, 0, 0, canvas.width, canvas.height)
}
// 循环调用绘制素材
for (let i = 0; i < noUpdateItemList.length; i++) {
await handleImg(noUpdateItemList[i], i);
}
// ==============================
// 绘制素材方法
function handleImg(currentValue, index) {
return new Promise((reslove, reject) => {
wx.getImageInfo({
src: currentValue.image,
success: res => {
const image = canvas.createImage()
image.src = res.path
image.onload = () => {
maskCanvasInfo.save();
maskCanvasInfo.beginPath();
maskCanvasInfo.translate(currentValue.x / state.realRatio, currentValue.y /
state.realRatio); //坐标
maskCanvasInfo.rotate((currentValue.angle * Math.PI) / 180);
maskCanvasInfo.translate(-((currentValue.width / state.realRatio *
currentValue.scale) / 2),
-((currentValue.height / state.realRatio * currentValue.scale) / 2)
);
maskCanvasInfo.drawImage(image, 0, 0, currentValue.width / state.realRatio *
currentValue.scale,
currentValue.height / state.realRatio * currentValue.scale,
)
maskCanvasInfo.restore();
reslove('成功');
}
},
fail: err => {
reject(err);
}
});
});
}
现在发现如果把位移旋转等操作拿到image.onload外,安卓可以画上,但是位置全都不对,没有按照translate位置来绘制。放到onload内位置正确,但是安卓就绘制不出图片了。 定制效果: [图片] 安卓绘制后的图(素材没有绘制出来): [图片] ios绘制后的图: [图片]