詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
在使用微信小程序canvas繪制文字時(shí),時(shí)常會(huì)遇到這樣的問題:因?yàn)閏anvasContext.fillText參數(shù)為
我們只能設(shè)置文本的最大寬度,這就產(chǎn)生一定的了問題。如果我們繪制的文本長度不確定或者我們希望文本超出自動(dòng)換行或者用省略號(hào)表示,光靠這個(gè)API是無法完成的。下面本人就講下我在開發(fā)中是如何解決這個(gè)問題的。
1 wxml代碼
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
2 wxss代碼
canvas { width: 99%; height: 600rpx; }
3 js代碼
Page({ data: { }, onLoad: function (options) { const context = wx.createCanvasContext('myCanvas') var text = '這是一段文字用于文本自動(dòng)換行文本長度自行設(shè)置歡迎大家指出缺陷';//這是要繪制的文本 var chr =text.split("");//這個(gè)方法是將一個(gè)字符串分割成字符串?dāng)?shù)組 var temp = ""; var row = []; context.setFontSize(18) context.setFillStyle("#000") for (var a = 0; a < chr.length; a++) { if (context.measureText(temp).width < 250) { temp += chr[a]; } else { a--; //這里添加了a-- 是為了防止字符丟失,效果圖中有對(duì)比 row.push(temp); temp = ""; } } row.push(temp); //如果數(shù)組長度大于2 則截取前兩個(gè) if (row.length > 2) { var rowCut = row.slice(0, 2); var rowPart = rowCut[1]; var test = ""; var empty = []; for (var a = 0; a < rowPart.length; a++) { if (context.measureText(test).width < 220) { test += rowPart[a]; } else { break; } } empty.push(test); var group = empty[0] + "..."http://這里只顯示兩行,超出的用...表示 rowCut.splice(1, 1, group); row = rowCut; } for (var b = 0; b < row.length; b++) { context.fillText(row[b], 10, 30 + b * 30, 300); } context.draw() } })
4 效果展示
添加了a- -和沒有a- -的對(duì)比
以上就是換行的方法,如果想設(shè)置為不換行超出用省略號(hào)顯示,也可參照上面的方法,將數(shù)組截取為一行再設(shè)置,道理是一樣的。
以上所述是小編給大家介紹的微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
- 微信小程序使用canvas的畫圖操作示例
- 微信小程序canvas拖拽、截圖組件功能
- 詳解微信小程序canvas圓角矩形的繪制的方法
- 微信小程序canvas寫字板效果及實(shí)例
- 微信小程序 二維碼canvas繪制實(shí)例詳解
- 微信小程序 wxapp畫布 canvas詳細(xì)介紹
- 微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變r(jià)gba的a值實(shí)現(xiàn))
- 微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變opacity實(shí)現(xiàn))
- 微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
- HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會(huì))
相關(guān)文章
JS+CSS實(shí)現(xiàn)淡入式焦點(diǎn)圖片幻燈切換效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)淡入式焦點(diǎn)圖片幻燈切換效果的方法,實(shí)例分析了javascript操作圖片、css等元素實(shí)現(xiàn)幻燈片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02怎樣用Javascript實(shí)現(xiàn)策略模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之策略模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),一定要看一下2021-04-04JavaScript 參數(shù)中的數(shù)組展開 [譯]
有些時(shí)候,我們需要把一個(gè)數(shù)組展開成多個(gè)元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來實(shí)現(xiàn)這種展開操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開操作以及如何在使用new運(yùn)算符的同時(shí)進(jìn)行展開操作2012-09-09Three.js中實(shí)現(xiàn)一個(gè)OBBHelper實(shí)例詳解
這篇文章主要介紹了Three.js中實(shí)現(xiàn)一個(gè)OBBHelper,本文參考Box3Helper源碼,并寫出一個(gè)OBBHelper,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期的獲取及天數(shù)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04微信公眾平臺(tái)開發(fā)教程(四) 實(shí)例入門:機(jī)器人回復(fù)(附源碼)
本篇文章主要介紹了微信公眾平臺(tái)開發(fā)機(jī)器人,可以實(shí)現(xiàn)簡單對(duì)話和查詢天氣等,有需要的可以了解一下。2016-12-12javascript(js)的小數(shù)點(diǎn)乘法除法問題詳解
本篇文章主要是對(duì)javascript(js)中的小數(shù)點(diǎn)乘法除法問題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03