微信小程序的画布文本换行和省略显示

多行文本处理在DOM元素中很容易处理。然而，canvas 中没有可用的方法。只有截取指定字符串才能达到目的。

那我介绍一下我自己的处理方法：

wxml：

<canvas canvas-id='word' id='test'></canvas>

Canvas必须有一个artboard容器。不要忘记设置宽度和高度。小程序默认宽度和高度为300px和150px

js：在

//处理文字多出省略号显示
    dealWords: function (options) {
        ();//设置字体大小var allRow = (().width / );//实际总共能分多少行var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数var endPos = 0;//当前字符串的截断点for (var j = 0; j < count; j++) {
            var nowStr = .slice(endPos);//当前剩余的字符串var rowWid = 0;//每一行当前宽度    if ((nowStr).width > ) {//如果当前的字符串宽度大于最大宽度，然后开始截取for (var m = 0; m < nowStr.length; m++) {
                    rowWid += (nowStr[m]).width;//当前字符串总宽度if (rowWid > ) {                        
                        if (j === options.maxLine - 1) { //如果是最后一行
                            ((0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18这是每一行的高度        
                        } else {
                            ((0, m), options.x, options.y + (j + 1) * 18);
                        }
                        endPos += m;//下次截断点break;
                    }
                }
            } else {//如果当前的字符串宽度小于最大宽度就直接输出
                ((0), options.x, options.y + (j + 1) * 18);
            }
        }
    },

(1)页面measureText().width这是小程序测量文本大小信息的方法。目前仅返回文本宽度。这里是官方的描述

(2) (j + 1) * 18 18 表示每行的行高为 18。这是我自己定义的线高。如果该值小于定义的字体大小，则两行文本很可能会重叠。前面的j+1表示当前行由多少行组成。一般表示的是当前行与上一行之间要增加多少距离

(3) j===中，表示对最后一行的处理，有 slice(0 , endPos-1），为什么在这里？需要减一，因为椭圆也考虑了宽度，可能与 相同，所以椭圆的宽度需要减小。因为汉字的宽度一般与设定的字体大小相当。如果它是英文的，它会更小，这里还没有详细考虑这一点。无论如何，减一意味着准确性。 。 。您可以自己或多或少地减少它

(4) endPos += m 指示下一次截断应开始的位置。因为每次字符串被截断后，都是原来的字符串。没有任何实际意义认为这是一次剪辑后剩余的序列。因此，每次截断点都必须与上一次截断点进行比较。单击加号可查看字符串截断的最后位置。

(5) 循环和判断用得有点多了。我不知道它们对性能是否有任何影响。 。 。 。 。 。如果调用

：

var ctx = ('word');
var name='窗前明月光，疑是地上霜，举头望明月，低头思故乡。';
this.dealWords({
    ctx: ctx,//画布上下文
    fontSize: 16,//字体大小
    word: name,//需要处理的文字
    maxWidth: 100,//一行文字最大宽度
    x: 0,//文字在x轴要显示的位置
    y: 0,//文字在y轴要显示的位置
    maxLine: 3//文字%