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文件提供了对每个字符小图的索引，这种格式的字体可以由专门的软件生成，比如位图字体制作工具。

位图字体制作工具

输入框 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();
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • Laya Base
    在线文档 http://layaair.ldc.layabox.com/api/ 在线案例 http://laya...
    JunChow520阅读 4,146评论 0赞 3
  • Laya 文本相关类（TextArea高度自适应）
    一、位于laya.display包下的两个类 1.class Text extends Sprite内部使用了gr...
    合肥黑阅读 3,057评论 0赞 0
  • 把自己活成一束光
    把自己活成一束光，自带光源，就会拥有战胜黑暗的力量！接近我，就是接近光！即使我所处的世界崩塌了，我也能够独立行走，...
    潇风sunny阅读 435评论 0赞 0
  • 对直销的重新认知
    对直销的重新认知最近接触到了一个共享美容院项目，是将直销，众筹，传统体验式美容院，消费商的等几个概念融合在一起的项...
    afea8a3e5b44阅读 271评论 0赞 0
  • 34/70 小自班 032 高烧与分享
    传奇人物富兰克林，他对自己的要求，被奉为成功学基础。今天高烧，就偷懒了，把富兰克林的13条戒律也好修身计划也好，分...
    游_游阅读 85评论 0赞 0