FairyGUI笔记：RichText（七）

最新推荐文章于 2022-09-09 14:50:12 发布

lalalalacheno

最新推荐文章于 2022-09-09 14:50:12 发布

阅读量2.9k

点赞数

分类专栏： fairygui

fairygui 专栏收录该内容

22 篇文章 13 订阅

订阅专栏

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属性。

lalalalacheno

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
FairyGUI笔记：RichText（七）

GRichTextField 富文本支持动态创建，例如：GRichTextField aRichTextField = new GRichTextField();aRichTextField.SetSize(100,100);aRichTextField.text = "&lt;a href='xxx'&gt;Hello World&lt;/a&gt;";侦听富文本中链接点击...
复制链接

扫一扫