微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:03:50

微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法

微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法:文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法，只有通過截取指定字符串來達(dá)到目的。那么下面就介紹我自己處理的辦法： wxml： <canvas canvas-id='word' id='test'></canvas> canvas肯定要一個(gè)畫板容器啦，

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法:文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法，只有通過截取指定字符串來達(dá)到目的。那么下面就介紹我自己處理的辦法： wxml： <canvas canvas-id='word' id='test'></canvas> canvas肯定要一個(gè)畫板容器啦，

文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法，只有通過截取指定字符串來達(dá)到目的。

那么下面就介紹我自己處理的辦法：

wxml：

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

canvas肯定要一個(gè)畫板容器啦，記得設(shè)置寬高哦，小程序中默認(rèn)寬高是300px和150px

js：在page中

//處理文字多出省略號(hào)顯示
 dealWords: function (options) {
 options.ctx.setFontSize(options.fontSize);//設(shè)置字體大小
 var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//實(shí)際總共能分多少行
 var count = allRow >= options.maxLine ? options.maxLine : allRow;//實(shí)際能分多少行與設(shè)置的最大顯示行數(shù)比，誰小就用誰做循環(huán)次數(shù)
 var endPos = 0;//當(dāng)前字符串的截?cái)帱c(diǎn)
 for (var j = 0; j < count; j++) {
 var nowStr = options.word.slice(endPos);//當(dāng)前剩余的字符串
 var rowWid = 0;//每一行當(dāng)前寬度 
 if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果當(dāng)前的字符串寬度大于最大寬度，然后開始截取
 for (var m = 0; m < nowStr.length; m++) {
 rowWid += options.ctx.measureText(nowStr[m]).width;//當(dāng)前字符串總寬度
 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;//下次截?cái)帱c(diǎn)
 break;
 }
 }
 } else {//如果當(dāng)前的字符串寬度小于最大寬度就直接

輸出 options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18); } } },

（1） measureText（）.width 這是小程序測(cè)量文本尺寸信息的方法，目前僅返回文本寬度。這里是官方說明

（2） (j + 1) * 18 中18表示每一行行高是18，這是我自己定義的行高如果這個(gè)數(shù)值小于定義的字體大小，多半會(huì)出現(xiàn)兩行文字重疊的現(xiàn)象，前面的 j+1 表示當(dāng)前是多少行。整體表示當(dāng)前行與上一行相比需要加多少距離

（3）在 j===options.maxLine-1 這個(gè)表示最后一行的處理情況里面有slice(0，endPos-1)，為什么這里要減一，是因?yàn)槭÷蕴?hào)也要占寬度，大概是11.5的樣子，所以要減掉這個(gè)省略號(hào)的寬度。因?yàn)橐话阒形淖址麑挾榷己驮O(shè)置的字體大小差不多。如果是英文就要小一點(diǎn)，這里就沒有考慮這么精細(xì)了。反正減一就是精確度的意思。。可以自行多減或者少減

（4） endPos += m 表示下一次截?cái)嗟臅r(shí)候是從哪里開始。因?yàn)槊看稳ソ刈址际亲畛醯淖址]有真正意義上的截?cái)嘁淮沃缶褪鞘Ｏ碌淖址耍砸衙看谓財(cái)嗟狞c(diǎn)和上一次截?cái)嗟狞c(diǎn)加上，才是最新一次字符串截?cái)嗟奈恢谩?/p>

（5）循環(huán)和判斷使用的有點(diǎn)多，不知道對(duì)性能有沒有影響。。。

調(diào)用的時(shí)候：

var ctx = wx.createCanvasContext('word');
var name='窗前明月光，疑是地上霜，舉頭望明月，低頭思故鄉(xiāng)。';
this.dealWords({
 ctx: ctx,//畫布上下文
 fontSize: 16,//字體大小
 word: name,//需要處理的文字
 maxWidth: 100,//一行文字最大寬度
 x: 0,//文字在x軸要顯示的位置
 y: 0,//文字在y軸要顯示的位置
 maxLine: 3//文字最多顯示的行數(shù)
})
ctx.draw();

（1）這個(gè)方法能夠處理一行或者多行的情況，就看maxLine設(shè)置的大小了。當(dāng)然如果設(shè)置maxLine為0或者-1，就會(huì)不顯示的。。

看一下效果：