最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2018年11月14日 11:06:33   作者:站住,別跑  
大家都知道在canvas中沒有提供方法來(lái)處理文字的多行問(wèn)題,只有通過(guò)截取指定字符串來(lái)達(dá)到目的。接下來(lái)通過(guò)本文給大家介紹微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能 ,需要的朋友可以參考下

文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法,只有通過(guò)截取指定字符串來(lái)達(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ù)比,誰(shuí)小就用誰(shuí)做循環(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è)量文本尺寸信息的方法,目前僅返回文本寬度。這里是官方說(shuō)明

(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)嘁淮沃缶褪鞘O碌淖址?,所以要把每次截?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ì)不顯示的。。。

看一下效果:

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

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

總結(jié)

以上所述是小編給大家介紹的微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼

    原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼

    下面小編就為大家分享一篇原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • js判斷移動(dòng)端橫豎屏視口檢測(cè)實(shí)現(xiàn)的幾種方法

    js判斷移動(dòng)端橫豎屏視口檢測(cè)實(shí)現(xiàn)的幾種方法

    最近做歌一個(gè)小項(xiàng)目,但是要放到我們的app上,然而需要橫豎屏使用不同的樣式,本文就來(lái)介紹一下js判斷移動(dòng)端橫豎屏視口檢測(cè)實(shí)現(xiàn)的幾種方法,感興趣的可以了解一下
    2021-07-07
  • javascript 打印內(nèi)容方法小結(jié)

    javascript 打印內(nèi)容方法小結(jié)

    關(guān)于JS打印問(wèn)題!網(wǎng)上收集+自己總結(jié) ,需要的朋友可以參考下。
    2009-11-11
  • 淺談JavaScript 代碼簡(jiǎn)潔之道

    淺談JavaScript 代碼簡(jiǎn)潔之道

    這篇文章主要介紹了淺談JavaScript 代碼簡(jiǎn)潔之道,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • TypeScript接口使用介紹

    TypeScript接口使用介紹

    接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應(yīng)該是抽象的,需要由具體的類去實(shí)現(xiàn),然后第三方就可以通過(guò)這組抽象方法調(diào)用,讓具體的類執(zhí)行具體的方法
    2022-10-10
  • JavaScript多功能甘特圖組件jsGantt詳解

    JavaScript多功能甘特圖組件jsGantt詳解

    jsGantt是一個(gè)可定制的、靈活的、多語(yǔ)言的甘特圖組件,由原生 JavaScript構(gòu)建,它使用客戶端渲染以獲得快速的性能和動(dòng)態(tài)的交互性,非常適用于任何需要交互式時(shí)間線或時(shí)間表顯示的項(xiàng)目,本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt
    2023-07-07
  • DWR中各種java方法的調(diào)用

    DWR中各種java方法的調(diào)用

    DWR是一個(gè)框架,簡(jiǎn)單的說(shuō)就是能夠在javascript直接調(diào)用java方法,而不必去寫一大堆的javascript代碼。它的實(shí)現(xiàn)是基于ajax的,可以實(shí)現(xiàn)無(wú)刷新效果。不少DWR的例子,但大都只是某種方法的調(diào)用只在使用層面上介紹DWR,并不涉更多的技術(shù)與設(shè)計(jì)javascript中是如何調(diào)用的。
    2016-05-05
  • 一文詳解JavaScript中的fetch方法

    一文詳解JavaScript中的fetch方法

    fetch函數(shù)是一個(gè)用于在JavaScript中執(zhí)行HTTP請(qǐng)求的現(xiàn)代API,它提供了一種更簡(jiǎn)潔、更強(qiáng)大的方式來(lái)處理網(wǎng)絡(luò)請(qǐng)求,這篇文章主要介紹了JavaScript中fetch方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2025-04-04
  • 微信小程序scroll-view實(shí)現(xiàn)字幕滾動(dòng)

    微信小程序scroll-view實(shí)現(xiàn)字幕滾動(dòng)

    這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)字幕滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(三)情景對(duì)話中仿打字機(jī)輸出文字

    javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(三)情景對(duì)話中仿打字機(jī)輸出文字

    前兩講我告訴了大家如何使人物移動(dòng),那么今天我們就來(lái)看看如何實(shí)現(xiàn)仿《三國(guó)志曹操傳》人物情景對(duì)話,感興趣的朋友可以了解下,希望本文對(duì)你有所幫助
    2013-01-01

最新評(píng)論

鹿泉市| 清流县| 房山区| 新田县| 潞西市| 广河县| 确山县| 化德县| 南漳县| 吴忠市| 古浪县| 台山市| 曲沃县| 遂溪县| 兴宁市| 杭锦后旗| 钟山县| 北宁市| 张家港市| 土默特右旗| 确山县| 台湾省| 华蓥市| 商水县| 龙游县| 黔西| 宣武区| 蒲城县| 昔阳县| 濮阳县| 岳阳县| 福州市| 淅川县| 濉溪县| 许昌县| 新晃| 上林县| 中超| 邹城市| 淅川县| 泸定县|