⼩程序中的canvas⽂字断⾏和省略号显⽰功能的处理
⽅法
⽂字的多⾏处理在dom元素中很好办。但是canvas中没有提供⽅法，只有通过截取指定字符串来达到⽬的。
那么下⾯就介绍我⾃⼰处理的办法：
wxml：
<canvas canvas-id='word' id='test'></canvas>
canvas肯定要⼀个画板容器啦，记得设置宽⾼哦，⼩程序中默认宽⾼是300px和150px
js：在page中
//处理⽂字多出省略号显⽰
dealWords: function (options) {
var allRow = asureText(options.word).width / options.maxWidth);//实际总共能分多少⾏
var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少⾏与设置的最⼤显⽰⾏数⽐，谁⼩就⽤谁做循环次数
var endPos = 0;//当前字符串的截断点
for (var j = 0; j < count; j++) {
var nowStr = options.word.slice(endPos);//当前剩余的字符串
var rowWid = 0;//每⼀⾏当前宽度
if (asureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度⼤于最⼤宽度，然后开始截取
for (var m = 0; m < nowStr.length; m++) {
rowWid += asureText(nowStr[m]).width;//当前字符串总宽度
if (rowWid > options.maxWidth) {
if (j === options.maxLine - 1) { //如果是最后⼀⾏
} else {
}
endPos += m;//下次截断点
break;
}
}
} else {//如果当前的字符串宽度⼩于最⼤宽度就直接输出
}
}
},
（1） measureText（）.width 这是⼩程序测量⽂本尺⼨信息的⽅法，⽬前仅返回⽂本宽度。这⾥是官⽅说明
（2） (j + 1) * 18  中18表⽰每⼀⾏⾏⾼是18，这是我⾃⼰定义的⾏⾼如果这个数值⼩于定义的字体⼤⼩，多半会出现两⾏⽂字重叠的现象，前⾯的 j+1 表⽰当前是多少⾏。整体表⽰当前⾏与上⼀⾏相⽐需要加多少距离
（3）在 j===options.maxLine-1 这个表⽰最后⼀⾏的处理情况⾥⾯有slice(0，endPos-1)，为什么这⾥要减⼀，是因为省略号也要占宽度，⼤概是11.5的样⼦，所以要减掉这个省略号的宽度。因为⼀般中⽂字符宽度都和设置的字体⼤⼩差不多。如果是英⽂就要⼩⼀点，这⾥就没有考虑这么精细了。反正减⼀就是精确度的意思。。。可以⾃⾏多减或者少减
svg和canvas的区别
（4） endPos += m 表⽰下⼀次截断的时候是从哪⾥开始。因为每次去截字符串都是最初的字符串，并没有真正意义上的截断⼀次之后就是剩下的字符串了，所以要把每次截断的点和上⼀次截断的点加上，才是最新⼀次字符串截断的位置。
（5）循环和判断使⽤的有点多，不知道对性能有没有影响。。。。。。
调⽤的时候：
var ctx = wx.createCanvasContext('word');
var name='窗前明⽉光，疑是地上霜，举头望明⽉，低头思故乡。';
this.dealWords({
ctx: ctx,//画布上下⽂
fontSize: 16,//字体⼤⼩
word: name,//需要处理的⽂字
maxWidth: 100,//⼀⾏⽂字最⼤宽度
x: 0,//⽂字在x轴要显⽰的位置
y: 0,//⽂字在y轴要显⽰的位置
maxLine: 3//⽂字最多显⽰的⾏数
})
ctx.draw();
（1）这个⽅法能够处理⼀⾏或者多⾏的情况，就看maxLine设置的⼤⼩了。当然如果设置maxLine为0或者-1，就会不显⽰的。。。
看⼀下效果：
（1） canvas我设置的是200 * 200的⼤⼩，其它的设置就是上⾯调⽤的时候设置的
（1）这是当maxWidth设置为200px的时候的显⽰情况。
总结
以上所述是⼩编给⼤家介绍的⼩程序中的canvas ⽂字断⾏和省略号显⽰功能的处理⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。