小程序canvas循环绘制内容的问题

这次的业务逻辑中要用到小程序canvas。
这个canvas的要求是一段文字中间会加入一张图片然后在接下去写一段文字内容。并且文字和图片是随机出现的，因此只能用for循环来做。这里有一个问题就是canvas绘制文字的速度比绘制图片的速度快很多，一个for循环之后，for循环中的文字绘制已经执行完了但是，for循环中的图片还没有绘制好，就已经执行了for循环外面的context.draw()方法绘制好了canvas。这样图片就没有绘制上去。

解决思路：等待每一个for循环中的无论文字还是图片绘制完成之后在执行下一个for循环。
这里我用的是es6的async和await

代码：

async drawCanvas () {wx.showLoading({title: '加载中',})const context   = wx.createCanvasContext('Canvas')const w         = (wx.getSystemInfoSync().screenWidth / 375)//设备宽度比例let that        = thislet row         = ''//每行文字let H           = w * (250/that.data.imgWidth) * that.data.imgHeight//canvas主图高let startHeight = 0//开始画的高度let h           = 0context.setFillStyle('#ffffff')//画背景色context.fillRect(0, 0, 500, 816)//画背景色//引用本地图片context.drawImage(that.data.img,0,0,w * 250,H)//引入图片context.drawImage('路径','X轴距离','Y轴距离','引入图片长','引入图片宽')startHeight = H + 11context.setFontSize(w * 11);//设置文字大小context.setFillStyle("#333333");//设置文字颜色context.fillText(this.data.title,w * 13, w * (H + 12));//文字内容和坐标位置for (let j = 0;j < that.data.content.detail.length;j++) {if (that.data.content.detail[j].type == 1) {//画文字let pItem = that.data.content.detail[j].content.word.split('')for (let i = 0;i < pItem.length;i++) {row += pItem[i]if (context.measureText(row).width >= w * 224) {//拼接每一行的字符串if (w * (18 + startHeight) >= 390) {//当篇幅太大所能支持的最大行数row = row.substring(0,5) + '...'await context.setFontSize(w * 9);await context.setFillStyle("#333333");await context.fillText(row,w * 13,w * (18 + startHeight),w * 224);startHeight += 15break;}await context.setFontSize(w * 9);await context.setFillStyle("#333333");await context.fillText(row,w * 13, w *  (18 + startHeight),w * 224)startHeight += 15row = ''}if (i == pItem.length - 1) {//最后一次且不到最大篇幅时画上去await context.setFontSize(w * 9);await context.setFillStyle("#333333");await context.fillText(row,w * 13, w * (18 + startHeight),w * 224);startHeight += 15row = ''}}}else if (that.data.content.detail[j].type == 0) {//画图if (startHeight > 390) {return}let img = that.data.content.detail[j].content.imgawait new Promise(function (resolve,reject) {wx.getImageInfo({src: img,success: async res => {h = (224/res.width) * res.heightresolve()}})}).then(async function () {await context.drawImage(img,w * 13,w * (startHeight + 10),w * 224,w * h)startHeight = startHeight + h + 5})}}context.draw()//生成canvas图片that.setData({isCanvas : true})wx.hideLoading()},

其中绘制图片的时候需要回去到每一张图片的高度和宽度信息来进行等比缩放这里，这里就用到了wx的wx.getImageInfo()这个api，这里的成功回调是个传入的回调函数，await不起效果。这里我直接实例化一个promise将成功回调函数中的操作方到了then中。

最终效果：

总结：for循环中默认不会等待前一个循环中的所有程序都运行结束才去下一个for循环，而是直接不等待循环中的异步操作结束就像进入下一个循环。那么遇到for循环中后一个循环依赖前一个循环的结果这种情况async和await是一个很简便的处理方式。

小程序canvas循环绘制内容的问题相关推荐

微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
微信小程序canvas保存绘制图片
上篇文章大概写了一下canvas绘制图片的问题,那么接下来记录一下canvas保存图片的问题~ wx.canvasToTempFilePath() //把当前画布指定区域的内容导出生成指定大小的图片 ...
微信小程序Canvas画布绘制以及保存
<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongt ...
小程序 canvas 2d 绘制海报
效果图 canvas api 准备绘制图片 context.drawImage(image, dx, dy, dWidth, dHeight); image:绘制在Canvas上的元素,可以是各类C ...
小程序canvas商品海报绘制
小程序canvas海报绘制 1.html 绘制图片的元素 <view class="canvas-box"><canvas style="width: ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...

小程序canvas循环绘制内容的问题

小程序canvas循环绘制内容的问题相关推荐

最新文章

热门文章