canvas的坑之二

最新推荐文章于 2024-09-07 11:32:30 发布

weixin_30820151

最新推荐文章于 2024-09-07 11:32:30 发布

阅读量399

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/yufawen/p/10562361.html

版权

小程序开发中，如果需要做一些生成海报 / 插入文字.图片的功能，这个时候canvas控件可以实现你想要的效果。基础的用法我就不多说了，难度系不高，下面说两个我使用canvas做海报功能的时候遇到的3个大坑和多行文本绘制。

1.cancas中使用 cancas.drawImage() 方法

小程序中cancas.drawImage(imagePaht, 0, 0, 100, 100)里面，添加画布基础图片只有两种方式：
第一种：把图片加载到小程序文件夹中，直接通过image路径调用。（图片少且小可以使用）
第二种：使用云端存储的图片地址。（图片多且大使用url图片）
使用第二种方式会出现一个问题，cancas.drawImage()不支持直接使用url图片地址，不会报错，画布只会出现绘制上去的图片/文字，没有url基础图片。这个时候我们需要绕过这个url的方法，把图片下载到本地缓存，然后取出来使用，看下面代码。

//url图片下载到本地
  wx.downloadFile({
    url: "https://www.image.com", 
    success: function (sres) { console.log(sres.tempFilePath); //确保图片已下载到本地，再开始进行canvas操作 if (sres.tempFilePath){ that.createNewImage(sres.tempFilePath); } }, fail: function (fres) { } }) /* 处理图片/文字绘制 */ createNewImage: function (urlPath){ var that = this; var content = wx.createCanvasContext('mycanvas') // 把模板图片绘制到canvas上 content.drawImage(urlPath, 0, 0, 750, 2540);//使用下载的本地图片 this.setCarName(content); content.draw();//绘制图片 //把生成好的图片保存到本地 xxxxxxxxxxxxxxxxxxxxxxxxx },

2.canvas绘制的海报图片和想要的效果不一致

一般会出现两种情况，第一海报只展示了一部分，第二画布上的文字/图片位置没有出现在规定的位置，问题出在wxml中canvas的大小和js中 canvas.drawImage(）大小设置不一致，看代码
wxml:

<view class='canvas-box'>
  <canvas style='width:750px; height:2540px' canvas-id='mycanvas'></canvas> </view>

js:

canvas.drawImage(urlPath, 0, 0, 750, 2540);

3.安卓设备使用canvas崩溃

canvas绘制的时候有使用大图进行绘制的场景，这个时候发现一个奇怪的问题，ios系统加载大图绘制没毛病，安卓设备刚进页面就crash，不管安卓设备多牛逼还是会crash。这个时候需要好好看下官方组件，Bug中明确说到“避免设置过大的宽高，在安卓下会有crash的问题”，所以要好好看文档，毕竟ios和安卓不是一个妈生的。
安卓设备到底多大会crash呢，我给一个大概的数字“1200px / 4000px”，在这个范围内应该是安全的。
iOS设备多大会crash呢，我也不知道啊！我设置了“1920px / 9420px”大小的canvas，这么大的像素一点毛病都没有，大家可以试试看极限在哪里。

4.canvas绘制多行文本

canvas中绘制多行文本，并不能自动实现文本换行。文本的高度和宽度，换行的位置都需要我们自己处理。
代码如下：

var str = this.data.importDta.textarea;
var color = app.changeRgbColorToHex('rgb(254, 250, 169)'); var canvasWidth = 550;//计算canvas的宽度 var initHeight = 2200;//绘制字体距离canvas顶部初始的高度 content.setFontSize(60);//文本字体大小 content.setFillStyle(color);//文本字体颜色 this.drawText(content, str, initHeight, canvasWidth);//文本换行显示处理方法 content.stroke();

/**
    * 绘制多行文本
    * @param content  canvas对象
    * @param str 文本内容
    * @param initHeight 文本绘制在画布中的初始高度 * @param canvasWidth 文本绘制的最大宽度 */ drawText: function (content, str, initHeight, canvasWidth) { var lineWidth = 0; var lastSubStrIndex = 0; //每次开始截取的字符串的索引 for (let i = 0; i < str.length; i++) { lineWidth += content.measureText(str[i]).width; if (lineWidth > canvasWidth) { content.fillText(str.substring(lastSubStrIndex, i), 420, initHeight);//绘制截取部分 initHeight += 70;//60为字体的高度 lineWidth = 0; lastSubStrIndex = i; } if (i == str.length - 1) {//绘制剩余部分 content.fillText(str.substring(lastSubStrIndex, i + 1), 420, initHeight); } } }