微信小程序 canvas画布clip()在ios端多次裁剪无效

最新推荐文章于 2024-02-02 06:25:14 发布

非鱼贩客

最新推荐文章于 2024-02-02 06:25:14 发布

阅读量1.3k

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/ly2497935393/article/details/131598531

版权

最近在使用canvas绘制用户电子名片时，由于第一次使用不够熟悉，在绘制名片时根据顺序需要先裁剪出名片的形状及边角圆；

然后再在卡片区域中绘制头像，由于头像需要裁剪一个斜角线，于是需要使用到clip()进行二次裁剪，裁剪后在安卓手机显示一切正常，但在ios端测试时无法进行有效封闭

解决思路：

网上找了很久也没找到直接的有效解决方法，于是根据自己的思路新增了一个临时的画布，在将需要进行二次裁剪的样式先在临时画布上绘制后，再转换成图片，以图片的形式再绘制到画布中

代码示例：

 <canvas canvas-id="CanvasImg"></canvas>

// 创建临时画布
createCanvasContext(){
	const this_ = this
	const context_img = wx.createCanvasContext('CanvasImg');
	// 绘制用户头像
	context_img.save();
	// 开始创建一个路径
	context_img.beginPath()
	// 画一个圆形裁剪区域  宽、高
	context_img.arc(170, 180, height, Math.PI / 1.7, Math.PI * 1.5)
	// 关闭绘制路径
	context.closePath();  
	// 设置描边颜色，transparent：透明
	context.strokeStyle = "transparent";
	context.stroke();
	context_img.clip();
	// 绘制图片
	context_img.drawImage(img_path, 0, 0, 170, 180);
	context_img.restore();
	// 绘制完成，保存画布
	context_img.draw()
	// 临时画布图像转图片
    wx.canvasToTempFilePath({
         x: 0,
         y: 0,
         width: imageSize.width,
         height: imageSize.height,
         canvasId: 'CanvasImg',
         success: function(res) {
         	// 拿到绘制后的图片
            const avatarUrl = res.tempFilePath
            this_.setData({avatarUrl})  
         }
     });
}