Laya Text

文本 Text

结构	描述
Package	laya.display
Class	public class Text
Inheritance	Text / Sprite / Node / EventDispatcher / Object
Subclass	Input

• LayaAir可以通过laya.display.Text类添加文本，给文本设置字体样式、颜色、大小等。
• LayaAir的Text类用于创建显示对象以显示文本
• 如果运行时系统寻找不到设定的字体，则用系统默认的字体渲染文字，从而会导致异常。

文本样式

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        //根据字体创建文本
        this.createText();
    }
    createText(){
        this.txt = new Laya.Text();
        //设置文本内容宽度，高度自行匹配。
        this.txt.width = 400;
        //设置文本内容自动换行
        this.txt.wordWrap = true;
        //设置文本垂直行间距
        this.txt.leading = 5;
        //设备文本字体颜色
        this.txt.color = "#FF0000";
        //设置文本内容
        this.txt.text = "Layabox是性能最强的HTML5引擎技术提供商与优秀的游戏发行商，面向Flash开发者提供HTML5开发技术方案！";
        //设置文本字体
        this.txt.font = "Microsoft YaHei";
        //设置文本字体大小
        this.txt.fontSize = 40;
        //设置文本水平对齐方式
        this.txt.align = "center";
        //设置文本内容加粗
        this.txt.bold = true;
        //设置文本描边宽度
        this.txt.stroke = 1;
        //设置文本描边颜色
        this.txt.strokeColor = "#FFFFFF";
        //设置文本坐标位置
        this.txt.x = Laya.stage.width - this.txt.width >> 1;
        this.txt.y = Laya.stage.height - this.txt.height >> 1;
        //this.txt.pos(Laya.stage.width - this.txt.width >> 1, Laya.stage.height - this.txt.height >> 1);
        //设置文本区域边框颜色
        this.txt.borderColor = "#444444";

        Laya.stage.addChild(this.txt);
    }
}
//启动
new Test();

设置文本内容尺寸

• 文本的text动态属性用于设置当前文本内容字符串
• 文本的textHeight动态属性用于设置当前文本内容的像素高度
• 文本的textWidth动态属性用于设置当前文本内容的像素宽度

设置文本域尺寸

• 文本的width动态属性用于设置显示对象文本域的像素宽度
• 文本的height动态属性用于设置显示对象文本域的像素高度
• 文本的size(width, height)方法用于设置像是对象文本的像素宽高

设置自动换行

• 设置自动换行 wordWrap

自动换行

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        //根据字体创建文本
        this.createText();
    }
    createText(){
        this.txt = new Laya.Text();
        
        this.txt.size(400, 300);
        this.txt.wordWrap = true;

        this.txt.fontSize = 30;
        this.txt.color = "#FFFFFF";
        this.txt.text = "Layabox是HTML5引擎技术提供商与优秀的游戏发行商";
        this.txt.align = "left";

        this.txt.underline = true;
        this.txt.underlineColor = "#888888";

        this.txt.leading = 20;

        this.txt.x = Laya.stage.width - this.txt.width >> 1;
        this.txt.y = Laya.stage.height - this.txt.height >> 1;

        this.txt.borderColor = "#AAAAAA";
        this.txt.bgColor = "#222222";

        Laya.stage.addChild(this.txt);
    }
}
//启动
new Test();

设置下划线

• 文本的动态属性underline用于设置是否显示下划线
• 文本的动态属性 underlineColor用于设置下划线的颜色，为null则会使用字体的颜色。

下划线

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        //根据字体创建文本
        this.createText();
    }
    createText(){
        this.txt = new Laya.Text();
        //this.txt.size(300, 50);

        this.txt.fontSize = 30;
        this.txt.color = "#FFFFFF";
        this.txt.text = "Layabox\n是HTML5引擎技术提供商\n与优秀的游戏发行商";

        this.txt.align = "center";

        this.txt.underline = true;
        this.txt.underlineColor = "#888888";

        this.txt.leading = 20;

        this.txt.x = Laya.stage.width - this.txt.width >> 1;
        this.txt.y = Laya.stage.height - this.txt.height >> 1;

        this.txt.borderColor = "#AAAAAA";
        this.txt.bgColor = "#222222";

        Laya.stage.addChild(this.txt);
    }
}
//启动
new Test();

文本对齐方式

• 文本的align动态属性用于设置文本的水平对齐方式，取值可选left居左对齐、center居中对齐、right居右对齐。
• 文本的valign动态属性用于设置文本的垂直显示方式，取值可选top顶部对齐、middle居中对齐、bottom居低对齐。

自动调整文本尺寸

通过设置文本的autoSize属性可以根据文本内容自适应其大小

文本内容溢出

public var overflow:String

• overflow:String文本超出文本域后的行为，可选值为hidden、visible、scroll。
• overflow:String可选值的性能从低到高依次为 hidden > visible > scroll

public static var HIDDEN:String = hidden

Text.overflow = hidden表示不显示超出文本域的字符

public static var VISIBLE:String = visible

Text.overflow = visible表示不进行任何裁剪

public static var SCROLL:String = scroll

Text.overflow = scroll表示不显示文本域外的字符像素，支持scroll接口。

设置文本的overflow为scroll，并且使用scroll接口滚动文本。除了通过对文本区域设置overflow外，还可以通过设置scrollX和scrollY滚动文本视口，通过滚动文本来显示全部的文本内容。如果要实现滚动文本则需要使用overflow = Laya.Text.SCROLL，若设置Laya.Text.HIDDEN则滚动无效果。

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        const text = "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！";
        this.txt = this.createText(text).pos(50, 20);
        this.txt.on(Laya.Event.MOUSE_DOWN, this, this.onMouseDown);
    }
    onMouseDown(){
        this.prevX = this.txt.mouseX;
        this.prevY = this.txt.mouseY;
        //移动文本修改坐标
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.onScrollStartText);
        Laya.stage.on(Laya.Event.MOUSE_UP, this, this.onScrollFinishText);
    }
    onScrollStartText(){
        this.txt.scrollX += this.prevX - this.txt.mouseX;
        this.txt.scrollY += this.prevY - this.txt.mouseY;

        this.prevX = this.txt.mouseX;
        this.prevY = this.txt.mouseY;
    }
    onScrollFinishText(){
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onScrollStartText);
        Laya.stage.off(Laya.Event.MOUSE_UP, this, this.onScrollFinishText);
    }
    createText(text="", width=400, height=300, fontSize=20){
        let txt = new Laya.Text();

        if(width > 0 && height > 0){
            txt.size(width, height);    
        }else if(width > 0 && height <=0 ){
            txt.width = width;
        }else if(width <= 0 && height > 0){
            txt.height = height;
        }
        
        txt.color = "#444444";
        txt.fontSize = fontSize;

        txt.text = text;

        txt.overflow = Laya.Text.SCROLL;

        txt.borderColor = "#DDDDDD";
        txt.bgColor = "#EEEEEE";
        

        Laya.stage.addChild(txt);

        return txt;
    }
}
//启动
new Test();

使用BitmapFont加载显示位图字体

• 文本的defaultFont静态属性用于设置文本字体类型，默认为Arial。
• 文本的defaultFontSize静态属性用于设置文本字体像素大小，默认为12像素。
• 文本的font动态属性用于设置文本字体类型
• 文本的fontSize动态属性用于设置文本字体像素大小，默认20像素。

位图字体（Bitmap Fonts）又叫点阵字体或像素字体（Pixel Fonts），区别于矢量字体，指的是在类似九宫格有限像素空间内以一个一个点组合描述的字体外观样式。

位图字体由fnt格式的字体和一张png图片组成，fnt文件提供了对每个字符小图的索引，这种格式的字体可以由专门的软件生成，比如位图字体制作工具。

位图字体制作工具

• Bitmap Font Generator http://www.angelcode.com/products/bmfont/
• Glyph Designer 一种商业位图字体工具，可用于阴影，渐变，笔触等各种选项。 Bitmap font generator for Mac https://www.71squared.com/glyphdesigner
• Hiero 用于将系统字体转换为位图的实用程序 https://github.com/libgdx/libgdx/wiki/Hiero

输入框 Input

结构	描述
Pakcage	laya.display.Input
Hierarchy	Input / Text

laya.display.Input类用于创建显示对象以显示和输入文本，Input类封装了原生的文本输入框，由于不同浏览器的差异会导致此对象的默认文本的位置域用户点击输入时的位置存在偏差。

创建新的Input类的实例

let input = new Laya.Input()

输入框Input的类型type作为静态常量之一，可选值包括：

输入框类型	描述
input.type = Laya.Input.TYPE_TEXT	常规文本域
input.type = Laya.Input.TYPE_PASSWORD	用于密码域输入
input.type = Laya.Input.EMAIL	包含邮箱地址的输入域
input.type = Laya.Input.URL	包含URL地址的输入域
input.type = Laya.Input.NUMBER	用于包含数值的输入域
input.type = Laya.Input.RANGE	包含一定数字范围的输入域，显示为滑动条。
input.type = Laya.Input.DATE	选取日期的年月日
input.type = Laya.Input.MONTH	选取年和月
input.type = Laya.Input.WEEK	选择周和年
input.type = Laya.Input.TIME	选择包含小时和分钟的时间
input.type = Laya.Input.DATE_TIME	选择UTC的年月日时分秒
input.type = Laya.Input.DATE_TIME_LOCAL	选取本地时间的年月日时分秒

• 输入框输入字符限制restrict
• 输入框输入字符限制 maxChars

输入框

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        this.createText("账号").pos(50, 20);
        this.createInput().pos(50, 50);
    }
    createText(text="", fontSize=20){
        this.txt = new Laya.Text();
        this.txt.color = "#FFFFFF";
        this.txt.fontSize = fontSize;
        this.txt.text = text;
        Laya.stage.addChild(this.txt);
        return this.txt;
    }
    createInput(prompt="请输入...", width=200, height=30, fontSize=20, restrict="0-9a-zA-Z", maxChars=20){
        this.input = new Laya.Input();
        //输入框宽高尺寸
        this.input.size(width, height);
        //输入框样式
        this.input.borderColor = "#DDDDDD";
        this.input.bgColor = "#EEEEEE";
        //输入框字体样式
        this.input.fontSize = fontSize;
        this.input.color = "#444444";
        //移动端输入提示符
        this.input.promopt = prompt;
        //是否自动换行
        this.input.wordWrap = false;
        //是否多行输入
        this.input.multiline = false;
        //输入框内间距像素大小 [上,右,下,左]
        this.input.padding = [0, 5, 0, 5];
        //输入字符内容限制
        this.input.restrict = restrict;
        //输入字符个数限制
        this.input.maxChars = maxChars;

        Laya.stage.addChild(this.input);
        return this.input;
    }
}
//启动
new Test();

文本输入框 TextInput

文本输入框是游戏中经常会使用到的UI组建，任何使用需要输入的时候都需要使用Laya.TextInput类。Laya.TextInput/laya.ui.TextInput继承自laya.ui.label。Laya.TextInput类用于创建显示对象和输入文本。

结构	值
Package	laya.ui
Class	public class TextInput
Inheritance	TextInput / Label / Component / Sprite / Node / EventDispatcher / Object
SubClass	TextArea

例如：显示单行文本

class Test{
    constructor(){
        //初始化引擎
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        //初始化舞台
        this.initStage();
        //初始化单行文本输入框
        this.initSingleTextInput();
    }
    //初始化舞台
    initStage(){
        //舞台设置
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
        Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色
    }
    //初始化单行文本输入框
    initSingleTextInput(){
        const text = "请输入";
        let input = new Laya.TextInput(text);
        input.text = "";//设置文本
        input.wordWrap = false;//设置文本自动换行
        input.fontSize = 24;//设置文本大小
        input.width = 220;
        input.height = 32;
        input.x = (Laya.stage.width - input.width)/2;
        input.y = (Laya.stage.height - input.height)/2;
        input.bgColor = "#fafafa";
        input.color = "#222";
        input.editable = true;//设置可编辑状态
        input.focus = true;//设置焦点在显示对象上
        input.maxChars = 20;//设置字符限制，默认为10000.
        input.multiline = false;//设置是否为文本域
        input.prompt = "账号";//设置输入提示符
        input.promptColor = "#888";//设置输入提示符字体颜色
        Laya.stage.addChild(input);
    }
}
new Test();