收藏
回答

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绘制后的图:

最后一次编辑于  2023-04-07
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容