小程序开发中，如果需要做一些生成海报 / 插入文字.图片的功能，这个时候canvas控件可以实现你想要的效果。基础的用法我就不多说了，难度系不高，下面说两个我使用canvas做海报功能的时候遇到的3个大坑和多行文本绘制。
1.canvas中使用 canvas.drawImage() 方法
小程序中canvas.drawImage(imagePaht, 0, 0, 100, 100)里面，添加画布基础图片只有两种方式：
第一种：把图片加载到小程序文件夹中，直接通过image路径调用。（图片少且小可以使用）
第二种：使用云端存储的图片地址。（图片多且大使用url图片）
使用第二种方式会出现一个问题，canvas.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();
(1)无换行符
整段文字，固定宽高显示区域自动换行
/**
* 绘制多行文本
* @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);
}
}
}
(2)有换行符
文字中间有换行符 \n , 自动换行+换行符换行
/**
* 绘制多行文本
* @param str 文本内容
* @param leftMargin 文本绘制的初始左边距
* @param initHeight 文本绘制的初始高度
* @param canvasWidth 文本的宽度
*/
//有“\n”换行符的处理方式
drawText: function (content, str, leftMargin, initHeight, canvasWidth) {
var lineWidth = 0
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += content.measureText(str[i]).width
if (str[i] == "\n") {
content.fillText(str.substring(lastSubStrIndex, i), leftMargin, initHeight);//绘制截取部分
initHeight += 84//文字+间距的高度
lineWidth = 0
lastSubStrIndex = i + 1;
}else if (lineWidth > canvasWidth) {
content.fillText(str.substring(lastSubStrIndex, i), leftMargin, initHeight);//绘制截取部分
initHeight += 84//文字+间距的高度
lineWidth = 0
lastSubStrIndex = i
}
if (i == str.length - 1) {//绘制剩余部分
content.fillText(str.substring(lastSubStrIndex, i + 1), leftMargin, initHeight);
}
}
}
目前只发现这三个坑，后面有坑会继续补充，希望大家能够合理的避开这三个坑，写出优秀的小程序应用！
网友评论