詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
在使用微信小程序canvas繪制文字時(shí),時(shí)常會(huì)遇到這樣的問(wèn)題:因?yàn)閏anvasContext.fillText參數(shù)為
我們只能設(shè)置文本的最大寬度,這就產(chǎn)生一定的了問(wèn)題。如果我們繪制的文本長(zhǎng)度不確定或者我們希望文本超出自動(dòng)換行或者用省略號(hào)表示,光靠這個(gè)API是無(wú)法完成的。下面本人就講下我在開(kāi)發(fā)中是如何解決這個(gè)問(wèn)題的。
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)換行文本長(zhǎ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ù)組長(zhǎng)度大于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- -和沒(méi)有a- -的對(duì)比
以上就是換行的方法,如果想設(shè)置為不換行超出用省略號(hào)顯示,也可參照上面的方法,將數(shù)組截取為一行再設(shè)置,道理是一樣的。
以上所述是小編給大家介紹的微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
- 微信小程序使用canvas的畫(huà)圖操作示例
- 微信小程序canvas拖拽、截圖組件功能
- 詳解微信小程序canvas圓角矩形的繪制的方法
- 微信小程序canvas寫(xiě)字板效果及實(shí)例
- 微信小程序 二維碼canvas繪制實(shí)例詳解
- 微信小程序 wxapp畫(huà)布 canvas詳細(xì)介紹
- 微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過(guò)改變r(jià)gba的a值實(shí)現(xiàn))
- 微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過(guò)改變opacity實(shí)現(xiàn))
- 微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
- HTML+CSS+JavaScript做女朋友版的刮刮樂(lè)(一看就會(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ù)組展開(kāi) [譯]
有些時(shí)候,我們需要把一個(gè)數(shù)組展開(kāi)成多個(gè)元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來(lái)實(shí)現(xiàn)這種展開(kāi)操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開(kāi)操作以及如何在使用new運(yùn)算符的同時(shí)進(jìn)行展開(kāi)操作2012-09-09Three.js中實(shí)現(xiàn)一個(gè)OBBHelper實(shí)例詳解
這篇文章主要介紹了Three.js中實(shí)現(xiàn)一個(gè)OBBHelper,本文參考Box3Helper源碼,并寫(xiě)出一個(gè)OBBHelper,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09JS實(shí)現(xiàn)簡(jiǎn)單的天數(shù)計(jì)算器完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的天數(shù)計(jì)算器,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期的獲取及天數(shù)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04微信公眾平臺(tái)開(kāi)發(fā)教程(四) 實(shí)例入門(mén):機(jī)器人回復(fù)(附源碼)
本篇文章主要介紹了微信公眾平臺(tái)開(kāi)發(fā)機(jī)器人,可以實(shí)現(xiàn)簡(jiǎn)單對(duì)話(huà)和查詢(xún)天氣等,有需要的可以了解一下。2016-12-12javascript(js)的小數(shù)點(diǎn)乘法除法問(wèn)題詳解
本篇文章主要是對(duì)javascript(js)中的小數(shù)點(diǎn)乘法除法問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03