canvas的坑之二

   

小程序开发中,如果需要做一些生成海报 / 插入文字.图片的功能,这个时候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); } } } 

目前只发现这三个坑,后面有坑会继续补充,希望大家能够合理的避开这三个坑,写出优秀的小程序应用




转载于:https://www.cnblogs.com/yufawen/p/10562361.html

你可能感兴趣的:(canvas的坑之二)