ActionScript
TypeScript
JavaScript

富文本:HTML文本

发布时间:2017-03-14

       使用HTML字符串创建文本,或者使用外部的html文件中的文字,HTML使用CSS样式。,让文本内容更加丰富,也可以添加图片作为文本内容。

直接创建所使用的是HTMLDivElement类

laya.html.dom.HTMLDivElement 所使用的API参数:

image.png

加载外部所使用的是HTMLIframeElement类

laya.html.dom.HTMLIframeElement中所使用的API参数:

image.png

我们创建HTML文本,分别通过直接创建和外部加载在舞台上显示。直接创建和外部加载所使用的类不同,根据实际情况导入不同的包。

blob.png

image.png

上半部分是我们用代码生成的HTML文本,可以看到我们设置的CSS样式,不同的颜色栏来显示不同的文字。下半部分是我们从外部加载的HTML文本,加载的文本不能直接修改。我们使用的demo地址:

http://layaair.ldc.layabox.com/demo/?Text_HTML


除了我们这个demo,还有一些实用的富文本使用方法:

  1. 简单的Html属性设置:Bold、Font、FontSize、Color、下划线
    【注意,不支持斜体、描边、span标签内嵌的方式】

image.png

2、获取Html文本的实际内容、获取html文本的实际宽高(contextWidth、contextHeight)

image.png

3、设置文本的水平居中对齐(align需要和width配合使用),换行(
换行需要有行高)、空格( ;)
【注意:目前不支持文本的垂直居中对齐,开发可以将(图片的高度-文本的高度)/2的值赋给文本的Y值,进行垂直居中对齐的替代设置】

image.png

4、实现超链接

image.png

5、实现html页面跳转

image.png

6、简单的图片显示

image.png

7、追加文本内容appendHtml

image.png

8、解决IOS手机上英文字母显示偏下的问题
在style样式中加垂直向上对齐valign:top属性

image.png