18.微信小程序之canvas绘制多行文本自动换行，支持换行符换行

心已赠人 2022-03-30 16:12 982阅读 0赞

canvas中的文本由用户输入，因此需要把一堆文字进行换行。当用户按下回车键进行换行时，也得将换行信息绘制出来。

drawText:function(ctx,item,initHeight,titleHeight){
        console.log('传入的initHeight is '+initHeight);
        console.log('传入的titleHeight is ' + titleHeight);
        var lineWidth = 0;
        //每次开始截取的字符串的索引
        var lastSubStrIndex = 0;
        for (var i = 0; i < item.length; i++) {
          lineWidth += ctx.measureText(item[i]).width;
          if (lineWidth > 315) {
            //绘制截取部分
            ctx.fillText(item.substring(lastSubStrIndex, i), 30, initHeight);
            //14为字体的高度
            initHeight += 20;
            lineWidth = 0;
            lastSubStrIndex = i;
            titleHeight += 20;
          }
           //绘制剩余部分
          if (i == item.length - 1) {
            ctx.fillText(item.substring(lastSubStrIndex, i + 1), 30, initHeight);
          }
        }
        console.log('结束一轮之后的initheight： '+initHeight+' titleHeight： '+titleHeight);
        return initHeight+','+titleHeight;
      },
    
    drawImage() {
        var that = this;
        var headCoach = '/image/headCoach.png';
        var onePrize = '/image/twoPrize.png';
        var twoPrize = '/image/twoPrize.png';
        var code = '/image/code.jpg';
        var str = '啦啦啦啦啦啦啦啦啦啦啦啦：啦啦啦\r\n当一个组件上的事件被触发后，该事件会向父节点传递冒泡事件.\r\n哈哈哈哈哈哈哈哈哈哈或或或或或哈哈哈哈哈哈或或或或或\r\n今天吃是没什么没什么没什么什么什么没什么事吗什么秘书吗\r\n啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦~';
        var lineWidth = 0;
        var lastSubStrIndex = 0;
        //文本绘制的初始高度
        //因为我绘制的是长图，所以初始高度很高。。
        var initHeight = 870;
        //绘制文本的高度
        var titleHeight = 900;
        const ctx = wx.createCanvasContext('myCanvas');
        ctx.setFillStyle('#D6554C');
        ctx.fillRect(0, 0, 375, 2400);
        ctx.drawImage(headCoach, 165, 20, 45, 45);
        ctx.setFillStyle('#FFFFFF');
        ctx.setFontSize(12);
        ctx.setTextAlign('center');
        ctx.fillText('某某某', 187, 85);
        ctx.setTextAlign('left');
        ctx.setLineWidth(1);
        ctx.setFontSize(14);
        ctx.setFillStyle('gray');
        
        var textArray = str.split('\r\n');
        console.log(textArray);
        for (var j = 0; j < textArray.length; j++) {
          var item = textArray[j];
          var isHeight=that.drawText(ctx,item,initHeight,titleHeight);
          var divideHeight = isHeight.split(',');
          initHeight = Number(divideHeight[0])+20;
          titleHeight = Number(divideHeight[1])+20;
        }
        
        console.log('绘制完成titleHeight is '+titleHeight);
        ctx.setFillStyle('#D6554C');
        ctx.fillRect(0, titleHeight - 35, 375, 15);
        that.setData({
          titleHeight: titleHeight-20
        });
        ctx.draw(false, function () {
          that.saveCanvasImage();
        });
      },