功能是:一个定制功能,在盒子底图上加素材图,Canvas绘图画成一个图。
这块代码去年就上线了。
好几个月没动过代码,之前都是可以的。最近安卓突然素材画不上去。
也没有报错。
ios和开发工具都正常。
绘制素材代码块:
// 定义CanvasContext
maskCanvasInfo = uni.createCanvasContext('maskCanvas');
// 绘制底图
maskCanvasInfo.drawImage(res.path, 0, 0, state.canvasWidth/state.realRatio, state.canvasHeight/state.realRatio);
// 循环绘制素材
for (let i = 0; i < noUpdateItemList.length; i++) {
await handleImg(noUpdateItemList[i], i);
}
// 绘制素材方法
function handleImg(currentValue, index) {
return new Promise((reslove, reject) => {
uni.getImageInfo({
src: currentValue.image,
success: res => {
maskCanvasInfo.save();
maskCanvasInfo.translate(0, 0);
maskCanvasInfo.beginPath();
maskCanvasInfo.translate(currentValue.x/state.realRatio * canvasPre, currentValue.y/state.realRatio * canvasPre); //圆心坐标
maskCanvasInfo.rotate((currentValue.angle * Math.PI) / 180);
maskCanvasInfo.translate(-(((currentValue.width/state.realRatio * currentValue.scale) / 2) * canvasPre), -(((currentValue.height/state.realRatio * currentValue.scale) / 2) * canvasPre));
maskCanvasInfo.drawImage(res.path, 0, 0, currentValue.width/state.realRatio * currentValue.scale * canvasPre, currentValue.height/state.realRatio * currentValue.scale * canvasPre);
maskCanvasInfo.restore();
reslove('成功');
},
fail: err => {
reject(err);
}
});
});
}
====更新下2023-04-07====
换成Canvas 2D后
如果把translate等操作放到image.onload外,那么安卓画出来了。但是所有平台下translate都失效,位置都不对了。
如果按下面代码,把translate等操作放入onload,在开发工具和ios是能正确画出图片,安卓又画不出来了。
function handleImg(currentValue, index) {
return new Promise((reslove, reject) => {
uni.getImageInfo({
src: currentValue.image,
success: res => {
const image = canvas.createImage()
image.src = res.path
image.onload = () => {
maskCanvasInfo.save();
maskCanvasInfo.translate(0, 0);
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);
}
});
});
}
w***@vip.qq.com (作者)
换成Canvas 2d了。安卓还是有点问题。
2023-04-07 17:51