小程序canvas多行文本绘制

简单封装了一个微信小程序端绘制多行文本的功能

该功能是基于小程序canvas2D api进行绘制

可以实现：

• 自动绘制多行文本
• 多行文本上下，左右，居中对齐功能
• 设置最大行数，超出显示省略号
• 设置最大宽度，超出自动换行
• 行间距

完整代码地址： gitee.com/huijia1/ani

一定注意canvas 的类型为2d

<canvas id="myCanvas" type="2d" style="height:{{aniData.windowHeight}}px;width:{{aniData.windowWidth}}px">
</canvas>

setText(...args) {
    const argArr = [...args];
    if (Object.prototype.toString.call(argArr[0]) == "[object Object]") {
      const textPram=Object.assign(this.defaultText,args[0])
      let text = textPram.text;
      if (!text) {
        throw new Error("未定义文字");
      }
//设置基本参数
      this.ctx.font = `${textPram.fontSize}px normal`;
      this.ctx.fillStyle = textPram.color;
      this.ctx.textAlign=textPram.align;
//将长文本分割
      const textObj = this.getTextArr(text,textPram.maxWidth);
      let textArr = textObj.textArr;
      if(textPram.maxLine){
        if(textArr.length>textPram.maxLine){
          textArr[textPram.maxLine-1]=textArr[textPram.maxLine-1].replace(/...$/,'...')
        }
        textArr=textArr.splice(0,textPram.maxLine)
      }
		
      let endTop=0;
      let endLeft=0;
      let startTop=0;
//设置对齐
      if(textPram.lineAlign){
        if(textPram.lineAlign=='center'){
          startTop=textArr.length * (textPram.fontSize+ textPram.space )/2
        }else if(textPram.lineAlign=='bottom'){
          startTop=textArr.length * (textPram.fontSize + textPram.space )
        }
      }
      textArr.forEach((x, i) => {
        let textY=textPram.y  - startTop + textPram.fontSize+ i * (textPram.fontSize + textPram.space)
        this.ctx.fillText(
            x,
            textPram.x,
            textY
        );

        if(i==textArr.length-1){
          endTop=textY
          if(this.ctx.textAlign=='left'){
            endLeft=textPram.x + (textPram.maxWidth||this.ctx.measureText(x).width)
          }else if(this.ctx.textAlign=='center'){
            endLeft=textPram.x  + (textPram.maxWidth||this.ctx.measureText(x).width)/2
          }else{
            endLeft=textPram.x
          }
        }
      });
// 输出文字下边缘和右侧边缘	
      return {
        endTop,
        endLeft,
        textArr
      }
    }else{

    }
  }

功能还在根据需求完善 有需要的可以自行添加

同时也完善了几个canvas图片绘制相关的功能，自动绘制网络图片，自适应宽高等功能。

完整代码地址： gitee.com/huijia1/ani