前言

最近韭菜長(zhǎng)的不錯(cuò)，公眾號(hào)也有點(diǎn)長(zhǎng)草了，出來(lái)割一波。

逛論壇看到這么一個(gè)需求，有人想要圣旨一樣布局的文本。

于是白玉無(wú)冰梭哈一下，寫了一個(gè)簡(jiǎn)易的組件供在座的各位參考。

本字體組件支持(就是原本系統(tǒng)字組件Label的閹割版本) ：

• 系統(tǒng)字體
• 空格，斜體，粗體
• 字體大小、行高

但暫未支持字體資源，對(duì)齊模式，緩存模式，排版模式，下劃線。（不過(guò)相信你看了這篇文章你自己也會(huì)擴(kuò)展這些功能，不是白玉無(wú)冰懶??）

使用方法和效果預(yù)覽如下：

實(shí)現(xiàn)

實(shí)現(xiàn)這個(gè)組件的精髓在于借鑒抄，翻源碼改造一下！

可能有些小伙伴不懂如何找源碼，只需打開(kāi)Cocos Creator編輯器，點(diǎn)擊右上角的編輯器按鈕就能找到了。

接著我們就參考label.ts中的源碼，寫一個(gè)組件繼承他，修改他的assembler，指向我們寫的。

最后我們補(bǔ)上這個(gè)自定義的assembler，參考源碼中的ttf.ts和ttfUtils。

主要是修改這個(gè)節(jié)點(diǎn)的大小和計(jì)算每個(gè)字符的位置，稍微改改，很快就完成了。

小結(jié)

翻源碼！查資料！借鑒！assembler！

以上為白玉無(wú)冰使用 Cocos Creator 3.0.0 實(shí)現(xiàn) "文本從右向左豎直布局!" 的技術(shù)分享。歡迎三連(點(diǎn)贊/在看/留言/分享)支持!

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

與大佬交個(gè)朋友吧！