FairyGUI筆記：RichText（七）
阿新 • • 發佈：2018-11-08
-
GRichTextField
富文字支援動態建立，例如：
GRichTextField aRichTextField = new GRichTextField();
aRichTextField.SetSize(100,100);
aRichTextField.text = "<a href='xxx'>Hello World</a>";偵聽富文字中連結點選的方法是（這個事件是冒泡的，也就是你可以不在富文字上偵聽，在它的父元件或者祖父元件上偵聽都是可以的）：
//Unity/Cry, EventContext裡的data就是href值。 aRichTextField.onClickLink.Add(onClickLink); //AS3/Egret，TextEvent.text就是href值。 aRichTextField.addEventListener(TextEvent.LINK, onClickLink); //Egret，TextEvent.text就是href值。 aRichTextField.addEventListener(TextEvent.LINK, this.onClickLink, this); //Laya, onClickLink的引數就是href值。 aRichTextField.on(laya.events.Event.LINK,this,this.onClickLink); //Cocos2dx，EventContext.getDataValue().asString()就是href的值。 aRichTextField->addEventListener(UIEventType::ClickLink, CC_CALLBACK_1(AClass::onClickLink, this));
富文字最重要的功能是支援HTML解析和渲染。普通的文字樣式標籤，例如FONT、B、I、U這些一般都能很好的支援。其他一些物件標籤，例如A、IMG等在各個引擎中支援的力度有所不同：
AS3/Starling支援A標籤和IMG標籤，支援混排UI庫裡的圖片/動畫和外部圖片。支援定製超級連結的樣式：
aRichTextField.ALinkFormat = new TextFormat(...);
aRichTextField.AHoverFormat = new TextFormat(...);-
Egret支援A標籤。不支援圖文混排。 -
Laya支援A標籤和IMG標籤，只支援混排外部圖片，不支援UI庫裡的圖片和動畫。Laya版本的GRichTextField的實質是包裝了Laya的HTMLDivElement，可以通過以下方式訪問：
var div:HtmlDivElement = aRichTextField.div;-
Unity支援A、IMG、INPUT、SELECT，P等。 -
HTML語法
IMG支援混排UI庫裡的圖片/動畫和外部(網路）圖片。載入外部圖片的能力可以通過擴充套件Loader提供。注意，img標籤需要使用“/>”結束，而不是“>”。
<img src='ui://包名/圖片名'/>
//還可以指定圖片的大小
<img src='ui://包名/圖片名' width='20' height='20'/>
//還可以用百分比指定圖片的大小
<img src='ui://包名/圖片名' width='50%' height='50%'/>A顯示一個超級連結。例如：
<a href='xxx'>link text</a>支援定義超級連結的樣式。如果是全域性修改，可以使用HtmlParseOptions的靜態屬性，例如：
//注意：全域性設定應該在建立富文字之前呼叫。
//設定整個專案中所有連結是否帶下劃線
HtmlParseOptions.DefaultLinkUnderline = false;
//設定超級連結的顏色
HtmlParseOptions.DefaultLinkColor = ...;
HtmlParseOptions.DefaultLinkBgColor = ...;
HtmlParseOptions.DefaultLinkHoverBgColor = ...;如果你只想定義單個富文字的連結樣式，那麼可以這樣：
HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;
options.linkUnderline = false;
options.linkColor = ...;
options.linkBgColor = ...;
options.linkHoverBgColor = ...;如果同一個文字內的各個連結都需要不同顏色，那麼在連結標籤外圍用顏色標籤包住就行了。
INPUT支援顯示以下語法：
//顯示一個按鈕
<input type='button' value='標題'/>
//顯示一個輸入框
<input type='text' value='文字內容'/>如果需要顯示按鈕，需要先定義按鈕對應的資源，否則無法顯示。例如：
HtmlButton.resource = "ui://包名/按鈕名";對於輸入框，可以定義輸入框的邊框顏色和邊框大小，例如：
HtmlInput.defaultBorderSize = 2;
HtmlInput.defaultBorderColor = ...;SELECT是使用該標籤可以顯示一個下拉選擇框。例如：
<select name=''>
<option value='1'>1</option>
<option value='2'>2</option>
</select>在使用下拉框前，需要先定義下拉框對應的資源，否則無法顯示。例如：
HtmlSelect.resource = "ui://包名/下拉框元件名";P例如顯示一張居中的圖片：
<p align='center'><img src=''/></p>預設情況下，GRichTextField將文本當做HTML片段處理，即對於空格、回車等空白字元是保留的。如果你希望當做完整的HTML處理，不保留空白，可以用以下幾種方式：
- 使用HtmlParseOptions：
HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;
options.ignoreWhiteSpace = true;- 將文字內容使用HTML或BODY標籤包裹，例如：
aRichTextField.text = "<body>text </body>";如果要訪問HTML中的物件，可以使用以下的方式：
//當前文字中具有的HTML元素數量
int cnt = aRichTextField.richTextField.htmlElementCount;
//獲得指定索引的HTML元素，0=<index<cnt
HtmlElement element = aRichTextField.richTextField.GetHtmlElementAt(index);
//獲得指定名稱的HTML元素。名稱由HTML元素裡的name屬性指定。
element = aRichTextField.richTextField.GetHtmlElement(elementName);
//獲得HTML元素對應的HTML物件。HTML物件的型別有HtmlImage、HtmlLink、HtmlInput等。
IHtmlObject htmlObject = (IHtmlObject)element.htmlObject;
if(element.type==HtmlElementType.Image)
{
HtmlImage image = (HtmlImage)htmlObject;
}又例如，如果要製作滑鼠移到連結上顯示資訊的效果：
int cnt = richText.htmlObjectCount;
for(int i=0;i<cnt;i++)
{
IHtmlObject obj = richText.GetHtmlObjectAt(i);
if(obj is HtmlLink)
{
((HtmlLink)obj).shape.onRollOver.Add(onLinkRollOver);
((HtmlLink)obj).shape.onRollOut.Add(onLinkRollOut);
}
}
//你可以在RollOver和RollOut的處理裡呼叫GRoot.inst.ShowPopup、GRoot.inst.ShowTooltips或者其他處理。
你也可以擴充套件實現自己的IHtmlObject。你需要自己實現一個IHtmlPageContext介面，然後賦值給RichTextField的htmlPageContext屬性。