小程序模板網(wǎng)

微信小程序之canvas 文字?jǐn)嘈泻褪÷蕴栵@示

發(fā)布時間:2018-11-15 16:41 所屬欄目:小程序開發(fā)教程

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

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

wxml:

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

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

js:在page中

復(fù)制代碼
//處理文字多出省略號顯示
    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)前字符串的截斷點(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;//下次截斷點(diǎn)
                        break;
                    }
                }
            } else {//如果當(dāng)前的字符串寬度小于最大寬度就直接輸出
                options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
            }
        }
    },
復(fù)制代碼

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

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

(3) 在 j===options.maxLine-1 這個表示最后一行的處理情況里面   有slice(0,endPos-1),為什么這里要減一,是因?yàn)槭÷蕴栆惨紝挾龋蟾攀?1.5的樣子,所以要減掉這個省略號的寬度。因?yàn)橐话阒形淖址麑挾榷己驮O(shè)置的字體大小差不多。如果是英文就要小一點(diǎn),這里就沒有考慮這么精細(xì)了。反正減一就是精確度的意思。。??梢宰孕卸鄿p或者少減

(4) endPos += m 表示下一次截斷的時候是從哪里開始。因?yàn)槊看稳ソ刈址际亲畛醯淖址]有真正意義上的截斷一次之后就是剩下的字符串了,所以要把每次截斷的點(diǎn)和上一次截斷的點(diǎn)加上,才是最新一次字符串截斷的位置。

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

調(diào)用的時候:

復(fù)制代碼
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();
復(fù)制代碼

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

看一下效果:

(1) canvas我設(shè)置的是200 * 200的大小,其它的設(shè)置就是上面調(diào)用的時候設(shè)置的

(1) 這是當(dāng)maxWidth設(shè)置為200px的時候的顯示情況。 

完成 (^-^)V


 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24952.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢