Laya FairyGui系列七 GTextField

文本(GTextField)

文本是一個基礎(chǔ)組件,說到文本就不能不說字體。FGUI支持動態(tài)字體和位圖字體,同時也支持BMFont等位圖字體制作工具導(dǎo)出的fnt格式的位圖字體。
動態(tài)字體是直接使用ttf字體渲染文字,ttf字體可以是系統(tǒng)中的也是可以是打包再游戲中的,但是這種做法很少,畢竟一個字體文件還是很大的。
不同的設(shè)備環(huán)境對ttf字體的渲染也會有一定的差異,所以導(dǎo)致最終有一些設(shè)備運(yùn)行的時候效果會有一定的差異。
位圖字體是由美術(shù)制作每個字符的圖片,F(xiàn)GUI編輯器點(diǎn)擊菜單“編輯”->“創(chuàng)建位圖字體”,然后彈出的字體編輯窗口,把資源庫中字體的圖片子資源拖動到字體編輯窗口中,并切實(shí)每個圖片對應(yīng)的字符,點(diǎn)擊保存即可。


GTextField.png

動態(tài)創(chuàng)建文本

const testText = new fairygui.GBasicTextField();
testText.setSize(100,50);   // 設(shè)置文本大小
testText.fontSize = 30;     // 設(shè)置文本字體大小
testText.color = "#ffffff"; // 設(shè)置字體顏色
testText.font = "ui://Package1/testFont"; // 設(shè)置字體
testText.text = '1234';
testCom.addChild(testText);

注意是GBasicTextField,不能是GTextField。
Laya中普通文本不支持UBB語法,雖然再編輯器中有效,但是發(fā)布后到Laya后任然會失效。普通文本不支持鼠標(biāo)點(diǎn)擊。
如果文本被設(shè)置成單行,換行符會被忽略。
如果實(shí)際使用中出現(xiàn)文本向上偏移時可以試試將文本框的高度拉大(官網(wǎng)至今也未徹底解決文本偏移問題)。

關(guān)于文本的其他一些常規(guī)使用就不贅述了,有疑問的可以看看這里

富文本(GRichTextField)

富文本繼承自文本,然后對Laya的HTMLDivElement進(jìn)行的包裝,所以雖然支持UBB語法,但是FGUI實(shí)際還是將UBB轉(zhuǎn)換成html,所以實(shí)際使用的時候可以直接使用html語法實(shí)現(xiàn)富文本。

  • 圖文混排
// 無法設(shè)置資源包中的圖片資源也不支持使用圖集
testText.text = "Hello Fairygui<img src='res/skill014.png'/>";
GTextField_0.png
  • 修改顯示圖片的大小
testText.text = "Hello Fairygui<img src='res/skill014.png' style='width:50px;height:50px'/>";
GTextField_1.png
  • 獲取富文本中的HTMLDivElement對象
var div:HtmlDivElement = aRichTextField.div;

其他的用法和HTMLDivElement無差,可以參考這位網(wǎng)友的帖子:Laya 富文本 HtmlDivElement

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容