码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 - canvas实现多行文本 ,实现文本断行

时间:2020-06-05 13:04:05      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:mic   高度   target   ram   raw   text   alt   解决   length   

1.canvas绘制文本坑点

绘制的文本不管多长,永远只有一行,不会断行。

2.解决思路

根据每行文本字数来断行,超出的就向下排列。

由于 canvas绘制文本的语法如下:

context.fillText(text,x,y,maxWidth);

所以需要知道文本的起始坐标(x,y)

3.具体分析

技术图片

 

 4.实现

说明:需返回多行文本高度,因为canvas的绘制都是通过坐标完成,方便绘制后面的内容取纵坐标

/**
    * @func 绘制多行文本
    * @desc 一个带参数的函数
    * @param ctx - 参数ctx
    * @param text - 文本
    * @param pointX - 文本左上角x坐标位置
    * @param pointY - 左上角y坐标位置
    * @param rowStrnum - 每行多少个字
    * @param lineHeight - 行高
    * 
    */
  drawRowtext(ctx, text, pointX, pointY, rowStrnum, lineHeight) {
    var len = text.length;
    var n = len / rowStrnum;
    // console.log(n);
    var n1 = Math.ceil(n);//向上取整
    ctx.setFillStyle(‘#906338‘);
    for (var i = 0; i < n1; i++) { 
      ctx.fillText(text.slice(i * rowStrnum, ((i + 1) * rowStrnum)+1), pointX, pointY + i * lineHeight);
    }
    return n * lineHeight;
  },

 

5.后记

之前的随笔  《微信小程序canvas绘制,并且实现图片保存》https://www.cnblogs.com/lingXie/p/10609530.html 也有绘制多行文本的方法,不过是网上找的,总是或多或少有的问题,所以修改了哈。

 

微信小程序 - canvas实现多行文本 ,实现文本断行

标签:mic   高度   target   ram   raw   text   alt   解决   length   

原文地址:https://www.cnblogs.com/lingXie/p/13048745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!