2.7 文本

Egret提供了三种文本类型：普通文本、输入文本以及位图文本，而且文本对象支持多种样式。

2.7.1 三种文本类型

首先创建一个称为“Text”的项目，将src文件夹内的文件全部删除，然后在其内部创建一个称为Main.ts的类文件，对其进行如下修改，参见二维码2-17：

运行调试播放器观看结果，如图2-37所示：

在第13行，创建了一个TextField对象，在第14行，将它的text属性设置为"This is a text!"，这个设置的结果会立即显示出来。

以上是普通文本的示例，接下来讲解一下输入文本。继续上一个项目，在Main类里继续添加如下的代码，参见二维码2-18：

onAddToStage方法里也要做出对应的修改：

运行调试播放器观看结果，如图2-38所示：

在普通文本下面出现一个黑色的文本，单击这个黑色文本的后，就可以编辑这个文本，这个就是输入文本对象。输入文本对象与普通文本对象的区别就在于第3行代码：

这句代码可以把普通文本变为输入文本。

接下来讲解一下位图文本，继续之前的项目，在Main类中继续添加以下代码，参见二维码2-19：

onAddToStage方法也要做出修改：

运行项目之前要确保项目文件夹内的resource文件夹内有cartoon-font.fnt和cartoon-font.png两个文件。

运行调试播放器观看结果，如图2-39所示：

在onAddToStage方法里添加的方法涉及了Egret的资源加载功能，这个知识点将会在下一章介绍，这里只需要了解这些代码的功能就是加载了资源的配置文件，并在随后加载了资源即可。

在位图文本中第一个代码清单的第10行，创建了一个new egret.BitmapText类的对象，该类的用法和egret.TextField类的用法相似，只不过前者可以使用自定义的位图字体，而且字体也是通过font（代码第11行）属性指定的，但是该属性的类型是BitmapFont，而不是字符串。

2.7.2 文本样式

开发者可以使用文本样式来指定文字的外观。本节将介绍几种常见的文本样式属性。

（1）字体、字号、颜色、描边以及加粗与斜体

创建一个称为“TextStyle”的新项目，删除src文件夹内的所有文件，然后创建一个称为Main.ts的类文件，然后做出如下修改，参见二维码2-20：

运行调试播放器观看结果，如图2-40所示：

可以看到，把文字的字体设置为“Impact”了。

在代码的第13行，通过TextField对象的fontFamily属性来改变字体。接下来改变一下字号。继续上一个项目，对其做出如下修改：

启动调试播放器观看结果，如图2-41所示：

文字明显变大了。在代码的第4 行，把文本的宽度加大了，否则如果增大字号会裁剪文本。代码的第8行，通过size属性，将字号设为50。

接下来看一下文本的颜色。继续之前的项目，对其做出如下修改：

运行调试播放器观看结果，如图2-42所示：

文字变成红色的了。这是因为在代码第9行，将属性textColor设置为0xff0000，这个16进制数字就是红色的颜色值。

接下来看一下描边效果。继续上一个项目，对其做出如下修改，参见二维码2-21：

运行调试播放器观看结果，如图2-43所示：

文字加上可蓝色的描边。这是因为在代码第10 行，通过 strokeColor属性来指定描边颜色。在第11行，通过stroke属性来指定描边的宽度。

接下来看一下加粗和斜体效果。继续上一个项目，对其做出如下修改，参见二维码2-22：

启动调试播放器观看结果，如图2-44所示：

文字变成粗体并倾斜了。这是因为代码的第12行，通过将bold属性设置为true来将其变成粗体。代码的第13行，通过将italic属性设置为true来将其变成斜体。

（2）混合样式

接下来介绍一下混合样式，通过这种方式可以创造富文本。可以通过两种方式来设置混合样式，一种是JSON方式，另一种是HTML方式。继续上一个项目，对其做出如下修改，参见二维码2-23：

把之前的功能提取到一个称为drawText的方法里。运行调试播放器观看结果，如图2-45所示：

丰富混合文本是由ITextElement类型的对象组成的，ITextElement是这样定义的：

其中ITextStyle对象就是各种样式属性的集合。比如第33行的代码格式化之后如下所示：

这个对象的类型就是ITextElement的，其中的style对象为：

它的类型为ITextStyle。

接下来介绍一下HTML的方式。继续之前的项目，在Main类里继续添加如下的方法，参见二维码2-24：

相应地，onAddToStage也要做出修改：

运行调试播放器观看结果，如图2-46所示：

这次绘制出了和JSON方式等价的混合文本。接下来介绍一下文本布局。

（3）文本布局

继续之前的项目，在Main类的内部继续添加以下的方法：

相应地对onAddToStage方法做出修改：

运行调试播放器观看效果，如图2-47所示：

在drawTextLayout方法的第8行，通过将border属性设置为true，从而让文本对象显示边框，这样就能看懂它的布局方式了。第9 行，通过将 borderColor属性设置为0x000000，从而将边框的颜色设置为黑色，这样就能看清边框了。

接下来介绍一下水平布局。对drawTextLayout 方法做出如下修改，参见二维码2-25：

运行调试播放器观看结果，如图2-48所示：

从图2-48可以看出文本对象对齐到边框的右侧了。

在代码的第10 行，通过设置textAlign 属性来指定文本的对齐方式，这种对齐方式是相对文本对象的边框的。这个属性是个字符串，而且Egret自带了该属性有效值的常量，egret.HorizontalAlign.RIGHT就是其中的一个。

课后作业：考虑一下，如何实现水平居中对齐。

接下来介绍一下纵向布局。对drawTextLayout方法做出如下修改，参见二维码2-26：

运行调试播放器观看结果，如图2-49所示：

从图中可以看出，文本移到左下角了。

在上面代码的第11行，通过指定verticalAlign属性来设置文本对象的垂直布局方式，跟textAlign一样，它的值也是一个字符串。而且egret.VerticalAlign.BOTTOM也是Egret自带的字符串常量。

课后作业：试将文本垂直居中显示。

（4）文本超链接事件

TextField对象可以响应Touch事件，也就是说，当单击文本对象的时候，可以指定触发代码。继续上一个项目，在Main类里继续添加以下代码，参见二维码2-27：

onAddToStage方法也要做出对应的修改：

运行调试播放器观看结果，如图2-50所示：

当单击第一行文字的时候，EgretWing的调试窗口会输出“text event triggered”。单击第2行文字不会有任何效果。