19.微信小程序之canvas绘制多行文本（更新版：绘制时间更短）

ゝ一纸荒年。 2022-04-22 20:22 212阅读 0赞

之前绘制完成了canvas绘制多行文本，实现自动换行，支持换行符换行。

（详情看这里：[https://blog.csdn.net/panzina/article/details/85953466][https_blog.csdn.net_panzina_article_details_85953466]）[ ][https_blog.csdn.net_panzina_article_details_85953466]

但是由于每个字要调用measureText，这样太消耗性能了，导致绘制的速度有点慢。所以在此改进

var initHeight = nowHeight+265;
        var titleHeight = nowHeight + 295;
        var textArray = str.split('&hc');
    
        // 计算单个字符宽度
        var singleTextWidth = ctx.measureText('我').width;
        // 315是一行的最大宽度
        var maxTextNumInOneLine = 315 / singleTextWidth;
    
        // 把句子数组再次切分 - 跟进字数切分
        var printArray = [];
        for (var j = 0; j < textArray.length; j++) {
          var item = textArray[j];
          var innerLen = item.length;
          if (innerLen == 0) {
            //用户输入换行，每一行用特殊符号"@aa@"代替
            printArray = printArray.concat("@aa@");
            continue;
          }
          for (; innerLen > 0;) {
            var splitNum = maxTextNumInOneLine <= innerLen ? maxTextNumInOneLine : innerLen;
            var printStr = item.substring(0, splitNum);
            printArray=printArray.concat(printStr);
            if (splitNum < maxTextNumInOneLine) {
              break;
            }
            item = item.substring(maxTextNumInOneLine);
            innerLen = item.length;
          }
        }
    
       
        // 去打印数组
        for (var j = 0; j < printArray.length; j++) {
          // 打印每一行句子，累加计算高度。
          console.log('每一行是'+printArray[j]);
          //如果是代表着换行的特殊符号，则绘制换行
          if (printArray[j] == '@aa@'){
            ctx.fillText('', 30, initHeight);
          }else{
            ctx.fillText(printArray[j], 30, initHeight);
          }
          
          initHeight += 20;
          titleHeight += 20;
        }

[https_blog.csdn.net_panzina_article_details_85953466]: https://blog.csdn.net/panzina/article/details/85953466

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 106 阅读

相关小程序canvas多行文本（可以兼容英文）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

墨蓝/ 2022年12月13日 09:53/ 0 赞/ 8 阅读

相关小程序canvas多行文字

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

古城微笑少年丶/ 2022年04月24日 01:32/ 0 赞/ 272 阅读

相关 19.微信小程序之canvas绘制多行文本（更新版：绘制时间更短）

之前绘制完成了canvas绘制多行文本，实现自动换行，支持换行符换行。（详情看这里：[https://blog.csdn.net/panzina/article/detai

ゝ一纸荒年。/ 2022年04月22日 20:22/ 0 赞/ 213 阅读

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

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

心已赠人/ 2022年03月30日 16:12/ 0 赞/ 1000 阅读

相关微信小程序 - 单行/多行文本省略号

多行文本省略号 .box{ display: -webkit-box; overflow: hidden; text-overflo

比眉伴天荒/ 2021年09月30日 03:14/ 0 赞/ 271 阅读

相关微信小程序利用canvas绘制一个动画百分比圆圈

在一次项目开发中，有个应用需求，就是不仅展示用户答题之后的分数和测评等级，还要利用动画圆圈的形式展示用户完成比。首先一般先想到的就是利用canvas绘图，因为如果用CSS来

「爱情、让人受尽委屈。」/ 2021年09月15日 15:40/ 0 赞/ 515 阅读

相关微信小程序开发—(八)canvas绘制图形

[一.小知识][.] (1).API接口 ![20170504092219697][] (2).context 对象的方法列表 ![201705040922347

r囧r小猫/ 2021年09月12日 06:22/ 0 赞/ 1215 阅读

相关微信小程序 - 使用canvas绘制海报实现分享功能

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3

喜欢ヅ旅行/ 2021年08月28日 16:28/ 0 赞/ 774 阅读

相关微信小程序2D canvas绘制分享海报

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

╰+攻爆jí腚メ/ 2021年07月24日 23:50/ 0 赞/ 1070 阅读