w***@vip.qq.com
w***@vip.qq.com
  • 发布:2023-04-05 22:07
  • 更新:2023-04-06 00:08
  • 阅读:438

微信小程序Canvas在安卓上无法叠加绘图

分类:uni-app

功能是:一个定制功能,在盒子底图上加素材图,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);  
            }  
        });  
    });  
}
2023-04-05 22:07 负责人:无 分享
已邀请:
陌上华年

陌上华年

使用canvas 2d啦

  • w***@vip.qq.com (作者)

    换成Canvas 2d了。安卓还是有点问题。

    2023-04-07 17:51

要回复问题请先登录注册