环境说明

本文使用 LayaAirIDE 版本、LayaAir 引擎版本为 2.0.0beat5：https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir%20IDE%202.0.0%20beta5

LayaAir 文本概述

LayaAir 可以通过 laya.display.Text /类添加文本，给文本设置字体样式、颜色、大小等。

Package	laya.display
类	public class Text
Inheritance	Text Sprite Node EventDispatcher Object
子类	Input

Text 类用于创建显示对象以显示文本。

注意：如果运行时系统找不到设定的字体，则用系统默认的字体渲染文字，从而导致显示异常。(通常电脑上显示正常，在一些移动端因缺少设置的字体而显示异常)。

Property	Defined By
align : String 表示文本的水平显示方式。取值： "left"：居左对齐显示。 "center"：居中对齐显示。 "right"：居右对齐显示。	Text
bgColor : String 文本背景颜色，以字符串表示。	Text
bold : Boolean 指定文本是否为粗体字。默认值为 false，这意味着不使用粗体字。如果值为 true，则文本为粗体字。	Text
borderColor : String 文本边框背景颜色，以字符串表示。	Text
CharacterCache : Boolean = true [static] WebGL渲染文字时是否启用字符缓存，对于字形多的语种，禁用缓存。对于字形随字母组合变化的语种，如阿拉伯文，启用将使显示错误。但是即使禁用，自动换行也会在错误的地方截断。	Text
color : String 表示文本的颜色值。可以通过 Text.defaultColor 设置默认颜色。默认值为黑色。	Text
font : String 文本的字体名称，以字符串形式表示。默认值为："Arial"，可以通过Font.defaultFont设置默认字体。如果运行时系统找不到设定的字体，则用系统默认的字体渲染文字，从而导致显示异常。(通常电脑上显示正常，在一些移动端因缺少设置的字体而显示异常)。	Text
fontSize : int 指定文本的字体大小（以像素为单位）。默认为20像素，可以通过 Text.defaultSize 设置默认大小。	Text
height : Number [override] 显示对象的高度，单位为像素，默认为0。此高度用于鼠标碰撞检测，并不影响显示对象图像大小。需要对显示对象的图像进行缩放，请使用scale、scaleX、scaleY。可以通过getbounds获取显示对象图像的实际高度。	Text
HIDDEN : String = hidden [static] hidden 不显示超出文本域的字符。	Text
italic : Boolean 表示使用此文本格式的文本是否为斜体。默认值为 false，这意味着不使用斜体。如果值为 true，则文本为斜体。	Text
langPacks : Object [static] 语言包	Text
leading : Number 垂直行间距（以像素为单位）。	Text
lines : Array [read-only]	Text
maxScrollX : int [read-only] 获取横向可滚动最大值。	Text
maxScrollY : int [read-only] 获取纵向可滚动最大值。	Text
overflow : String overflow 指定文本超出文本域后的行为。其值为"hidden"、"visible"和"scroll"之一。性能从高到低依次为：hidden > visible > scroll。	Text
padding : Array 边距信息。数据格式：[上边距，右边距，下边距，左边距]（边距以像素为单位）。	Text
RightToLeft : Boolean = false [static] 是否是从右向左的显示顺序	Text
SCROLL : String = scroll [static] scroll 不显示文本域外的字符像素，并且支持 scroll 接口。	Text
scrollX : Number 获取横向滚动量。	Text
scrollY : Number 获取纵向滚动量。	Text
stroke : Number 描边宽度（以像素为单位）。默认值0，表示不描边。	Text
strokeColor : String 描边颜色，以字符串表示。默认值为 "#000000"（黑色）;	Text
text : String 当前文本的内容字符串。	Text
textHeight : Number [read-only] 表示文本的高度，以像素为单位。	Text
textWidth : Number [read-only] 表示文本的宽度，以像素为单位。	Text
underline : Boolean = false 是否显示下划线。	Text
underlineColor : String	Text
valign : String 表示文本的垂直显示方式。取值： "top"：居顶部对齐显示。 "middle"：居中对齐显示。 "bottom"：居底部对齐显示。	Text
VISIBLE : String = visible [static] visible不进行任何裁切。	Text
width : Number [override] 显示对象的宽度，单位为像素，默认为0。此宽度用于鼠标碰撞检测，并不影响显示对象图像大小。需要对显示对象的图像进行缩放，请使用scale、scaleX、scaleY。可以通过getbounds获取显示对象图像的实际宽度。	Text
wordWrap : Boolean 表示文本是否自动换行，默认为false。若值为true，则自动换行；否则不自动换行。	Text

上图中的这些属性基本上就是开发中常用的 API，更多 Text API的详细用法，可以点击下面的API文档URL查看：

官网 API 地址：https://layaair.ldc.layabox.com/api/index.html?category=Core&class=laya.display.Text

文本基础样式

    //初始化引擎，指定大小
    Laya.init(360,640);
    //创建 laya 文本对象
    var txt = new Laya.Text();
    //设置文本内容
    txt.text = "hello_world，世界你好！";
    //设置文本颜色，默认值为黑色
    txt.color = "#ffffff";

    //设置文本框的颜色
    // txt.borderColor = "#23cfcf";
    //设置为斜体，默认为 false
    txt.italic = true;
    //设置字体,默认值为："Arial"
    txt.font = "Ya Hei";
    //文本背景颜色，以字符串表示
    txt.bgColor = "#f00";
    //指定文本的字体大小（以像素为单位）,默认为20像素
    txt.fontSize = 22;

    //将文本内容(组件)添加到舞台显示
    //public dynamic class Laya,Laya 继承 Object,是全局对象的引用入口集
    //public static var stage:Stage = null,静态属性，舞台对象的引用
    Laya.stage.addChild(txt);

文本对齐&自动换行

对齐模式主要是常规的水平对齐与垂直对齐，下面先了解一下API的参数说明，再通过示例代码进行介绍。laya.display.text中关于文本样式的API

height : Number

[override] 显示对象的高度，单位为像素，默认为0。此高度用于鼠标碰撞检测，并不影响显示对象图像大小。需要对显示对象的图像进行缩放，请使用scale、scaleX、scaleY。可以通过getbounds获取显示对象图像的实际高度。

width : Number

[override] 显示对象的宽度，单位为像素，默认为0。此宽度用于鼠标碰撞检测，并不影响显示对象图像大小。需要对显示对象的图像进行缩放，请使用scale、scaleX、scaleY。可以通过getbounds获取显示对象图像的实际宽度。

align : String

表示文本的水平显示方式。取值： "left"：居左对齐显示。 "center"：居中对齐显示。 "right"：居右对齐显示。

valign : String

表示文本的垂直显示方式。取值： "top"：居顶部对齐显示。 "middle"：居中对齐显示。 "bottom"：居底部对齐显示。

必须先给文本设置一个文本区域，然后设置文本在文本区域水平居中和垂直居中，不设置文本区域而直接设置文本的水平对齐和垂直对齐将不会有效果。

如果文本内容超过了设置的文本区域，将不会显示超出舞台的内容，这个时候需要使用自动换行来显示过长的文本。

wordWrap : Boolean

表示文本是否自动换行，默认为false。若值为true，则自动换行；否则不自动换行。

    //初始化引擎，指定大小
    Laya.init(360,640);
    //创建 laya 文本对象
    var txt = new Laya.Text();
    //设置文本内容
    txt.text = "hello_world，世界你好！";
    //设置文本颜色，默认值为黑色
    txt.color = "#ffffff";
    //指定文本的字体大小（以像素为单位）,默认为20像素
    txt.fontSize = 22;

    //height：显示对象的高度，单位为像素，默认为0，width 表示显示对象的宽度，单位为像素，默认为0
    //此宽/高度用于鼠标碰撞检测，并不影响显示对象图像大小。需要对显示对象的图像进行缩放，请使用scale、scaleX、scaleY -
    //可以通过getbounds获取显示对象图像的实际宽/高度。
    txt.width = 300;
    txt.height = 100;
    //设置文本-框的颜色
    txt.borderColor = "#23cfcf";

    //align:表示文本的水平显示方式。 取值： "left"： 居左对齐显示。 "center"： 居中对齐显示。 "right"： 居右对齐显示。
    //valign:表示文本的垂直显示方式。 取值： "top"： 居顶部对齐显示。 "middle"： 居中对齐显示。 "bottom"： 居底部对齐显示。 
    //只有在指定了width、height 时有效
    txt.align = "center";
    txt.valign = "middle";

    //wordWrap:表示文本是否自动换行，默认为false。 若值为true，则自动换行；否则不自动换行。 
    txt.wordWrap = true;

    //将文本内容(组件)添加到舞台显示
    //public dynamic class Laya,Laya 继承 Object,是全局对象的引用入口集
    //public static var stage:Stage = null,静态属性，舞台对象的引用
    Laya.stage.addChild(txt);

Laya 文本(JavaScript)

环境说明

LayaAir 文本概述

文本基础样式

文本对齐&自动换行

猜你喜欢