文字的多行處理在dom元素中很好辦。可是canvas中沒有提供方法,只有經過截取指定字符串來達到目的。html
那麼下面就介紹我本身處理的辦法:canvas
wxml:小程序
<canvas canvas-id='word' id='test'></canvas>
canvas確定要一個畫板容器啦,記得設置寬高哦,小程序中默認寬高是300px和150pxapi
js:在page中dom
//處理文字多出省略號顯示 dealWords: function (options) { options.ctx.setFontSize(options.fontSize);//設置字體大小 var allRow = Math.ceil(options.ctx.measureText(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 (options.ctx.measureText(nowStr).width > options.maxWidth) {//若是當前的字符串寬度大於最大寬度,而後開始截取 for (var m = 0; m < nowStr.length; m++) { rowWid += options.ctx.measureText(nowStr[m]).width;//當前字符串總寬度 if (rowWid > options.maxWidth) { if (j === options.maxLine - 1) { //若是是最後一行 options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18); //(j+1)*18這是每一行的高度 } else { options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18); } endPos += m;//下次截斷點 break; } } } else {//若是當前的字符串寬度小於最大寬度就直接輸出 options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18); } } },
(1) measureText().width 這是小程序 測量文本尺寸信息的方法,目前僅返回文本寬度。這裏是官方說明性能
(2) (j + 1) * 18 中18表示每一行行高是18,這是我本身定義的行高若是這個數值小於定義的字體大小,多半會出現兩行文字重疊的現象,前面的 j+1 表示當前是多少行。總體表示當前行與上一行相比須要加多少距離字體
(3) 在 j===options.maxLine-1 這個表示最後一行的處理狀況裏面 有slice(0,endPos-1),爲何這裏要減一,是由於省略號也要佔寬度,大概是11.5的樣子,因此要減掉這個省略號的寬度。由於通常中文字符寬度都和設置的字體大小差很少。若是是英文就要小一點,這裏就沒有考慮這麼精細了。反正減一就是精確度的意思。。。能夠自行多減或者少減this
(4) endPos += m 表示下一次截斷的時候是從哪裏開始。由於每次去截字符串都是最初的字符串,並無真正意義上的截斷一次以後就是剩下的字符串了,因此要把每次截斷的點和上一次截斷的點加上,纔是最新一次字符串截斷的位置。spa
(5) 循環和判斷使用的有點多,不知道對性能有沒有影響。。。。。。code
調用的時候:
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的時候的顯示狀況。
完成 (^-^)V