Laya Text(文本类)

  • A+
所属分类：H5 laya

Laya Text(文本类)

简介

文本是项目中必不可少的元素，通过文本我们可以显示各种各样的文字信息。在Laya中，Text 类用于创建显示对象以显示文本。下面介绍文本类以及展示其基本的使用。

项 值
Package laya.display
类 public class Text
Inheritance Text -> Sprite -> Node -> EventDispatcher -> Object
子类 Input

常用方法

Property 类型 说明 取值 默认值
align String 表示文本的水平显示方式。 "left"
"center"
"right"
bgColor String 文本背景颜色，以字符串表示。
bold Boolean 指定文本是否为粗体字。 true:粗体
flase:不使用粗体		 false
borderColor String 文本边框背景颜色，以字符串表示。
color String 表示文本的颜色值。 默认值为黑色
可通过 Text.defaultColor 设置默认颜色。
font String 文本的字体名称，以字符串形式表示。 默认值为："Arial"
可通过Font.defaultFont设置默认字体。
fontSize int 指定文本的字体大小（以像素为单位）。 默认为20像素
可通过Text.defaultSize 设置默认大小。
height Number [override] 显示对象的高度，
单位为像素。
此高度用于鼠标碰撞检测，
并不影响显示对象图像大小。
需要对显示对象的图像进行缩放，
请使用scale、scaleX、scaleY。
可通过getbounds获取显示对象图像的实际高度。		 0
HIDDEN String [static] hidden 不显示超出文本域的字符。 hidden
italic Boolean 表示使用此文本格式的文本是否为斜体。 true，则文本为斜体。
false,则文本不是斜体。		 false
langPacks Object [static] 语言包
leading Number 垂直行间距（以像素为单位）。
lines Array read-only]
maxScrollX int [read-only] 获取横向可滚动最大值。
maxScrollY int [read-only] 获取纵向可滚动最大值。

详细的API请参照官网Laya text的相关API使用说明。

创建空项目

Laya Text(文本类)

打开scr目录下的LayaSample.js。文件，以下代码均在此文件中进行修改。

文本基础样式示例

Laya.init(600, 400);

var txt = new Laya.Text();
//设置文本内容
txt.text = "hello_world";
//设置文本颜色
txt.color = "#ffffff";
//设置文本字体
txt.font = "Ya Hei";
//设置字体大小
txt.fontSize = 32;
//设置文本区背景
txt.bgColor = "#c30c30";
//设置文本框的颜色
txt.borderColor = "#23cfcf";
//设置粗体、斜体
txt.bold = true;
//设置斜体
txt.italic = true;
Laya.stage.addChild(txt);

Laya Text(文本类)

文本对齐示例

Laya.init(1136, 640);

var txt = new Laya.Text();
//设置文本内容
txt.text = "hello_world";
//设置文本区背景
txt.bgColor = "#c30c30";
//设置文本的宽高
txt.width = 400;
txt.height = 400;
//设置文本水平居中
txt.align = "center";
//设置文本垂直居中
txt.valign = "middle";
Laya.stage.addChild(txt);

Laya Text(文本类)

PS:不设置文本区域的直接设置文本的水平对齐和垂直对齐将不会有效果。

自动换行示例

Laya.init(1136, 640);

var txt = new Laya.Text();
//设置文本内容
txt.text = "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！";
//设置文本区背景
txt.bgColor = "#c30c30";
//设置文本的宽高
txt.width = 400;
txt.height = 400;
//设置文本水平居中
txt.align = "center";
//设置文本垂直居中
txt.valign = "middle";
//设置自动换行
txt.wordWrap = true;
Laya.stage.addChild(txt);

PS:要设置好文本区域的宽和高，要不然文字会按照默认的text宽进行自动换行。

Laya Text(文本类)

超出文本区域的处理

Laya.init(500,400,Laya.WebGL);

function createText() {
    var txt = new Laya.Text();
    txt.text = "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！";
    txt.borderColor = "#ffff00";
    //设置宽高以后的自动裁剪会按照这个区域裁剪
    txt.size(300, 50);
    txt.fontSize = 20;
    txt.color = "#ffffff";
    Laya.stage.addChild(txt);
    return txt;
}

function setup(){
    var t1 = this.createText();
    //设置不进行任何裁剪
    t1.overflow = Laya.Text.VISIBLE;
    t1.pos(10, 10);

    var t2 = this.createText();
    t2.overflow = Laya.Text.SCROLL;
    t2.pos(10, 110);

    var t3 = this.createText();
    //设置不显示超出文本域的字符
    t3.overflow = Laya.Text.HIDDEN;
    t3.pos(10, 210);
}

setup();

Laya Text(文本类)

  • hidden:不显示超出文本域的字符。
  • visible:不进行任何裁切。
  • scroll:不显示文本域外的字符像素，并且支持scroll接口。

PS:性能从高到低依次为：hidden > visible > scroll

滚动文本

设置文本区域属性为overflow后，还可以通过使用scrollX和scrollY滚动文本视口，通过滚动文本来显示全部的文本内容。

Laya.init(500,400,Laya.WebGL);

function createText() {
    this.txt = new Laya.Text();
    this.txt.overflow = Laya.Text.SCROLL;
    this.txt.text = "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！";
    this.txt.size(200,100);
    this.txt.x = Laya.stage.width - this.txt.width>>1;
    this.txt.y = Laya.stage.height - this.txt.height>>1;
    this.txt.borderColor = "#ffff00";
    this.txt.fontSize = 20;
    this.txt.color = "#ffffff";
    Laya.stage.addChild(this.txt);
    this.txt.on(Laya.Event.MOUSE_DOWN,this,startScrollText);
}
/*开始滚动文本*/
function startScrollText() {
    // console.log("startScrollText", this.txt.scrollX, this.txt.scrollY);
    this.prevX = this.txt.mouseX;
    this.prevY = this.txt.mouseY;
    Laya.stage.on(Laya.Event.MOUSE_MOVE, this, scrollText);
    Laya.stage.on(Laya.Event.MOUSE_UP, this, finishScrollText);
}
/*停止滚动文本*/
function finishScrollText() {
    // console.log("finishScrollText", this.txt.mouseX, this.txt.mouseY);
    Laya.stage.off(Laya.Event.MOUSE_MOVE, this, scrollText);
    Laya.stage.off(Laya.Event.MOUSE_UP, this, finishScrollText);
}
/*鼠标滚动文本*/
function scrollText() {
    // console.log("scrollText", this.txt.mouseX, this.txt.mouseY);
    var nowX = this.txt.mouseX;
    var nowY = this.txt.mouseY;
    // 将鼠标偏移值累计到滚动量里
    this.txt.scrollX += this.prevX - nowX;
    this.txt.scrollY += this.prevY - nowY;
    this.prevX = nowX;
    this.prevY = nowY;
}
createText();

PS:在没有设置overflow为Text.SCROLL的情况下，滚动无效!

textInput的单行输入&多行输入

文本输入框是游戏中经常会用到的一个UI组件。在Laya中,任何需要输入的时候都要使用到textInput这个类。
单行输入只能在一行内输入；多行可以通过回车在上一行未满的情况下在下一行输入。
下面展示这个类的单行和多行输入。

Laya.init(640,800,Laya.WebGL);

/*单行输入*/
function Text_InputSingleline() {
    var textInput = new Laya.TextInput("单行输入");
    textInput.wordWrap = true; // 文本自动换行
    textInput.fontSize = 30; // 设置字体大小
    textInput.x = 0; //设置 textInput 对象的属性 x 的值，用于控制 textInput 对象的显示位置
    textInput.y = 0;//设置 textInput 对象的属性 y 的值，用于控制 textInput 对象的显示位置
    textInput.width = 300; //设置 textInput的宽度
    textInput.height = 200; //设置 textInput 的高度
    textInput.bgColor = "#c30c30"; // 设置 textInput 的背景颜色
    Laya.stage.addChild(textInput); // 添加到舞台
}
/*多行输入*/
function Text_InputMultiine() {
    var textInput = new Laya.TextInput("多行输入");
    textInput.wordWrap = true; // 文本自动换行
    textInput.multiline = true; // 设置多行输入
    textInput.fontSize = 30; // 设置字体大小
    textInput.x = 0; //设置 textInput 对象的属性 x 的值，用于控制 textInput 对象的显示位置
    textInput.y = 300;//设置 textInput 对象的属性 y 的值，用于控制 textInput 对象的显示位置
    textInput.width = 300; //设置 textInput的宽度
    textInput.height = 200; //设置 textInput 的高度
    textInput.bgColor = "#c30c30"; // 设置 textInput 的背景颜色
    Laya.stage.addChild(textInput); // 添加到舞台
}
Laya.stage.bgColor = "#efefef"; // 设置舞台背景色
Text_InputSingleline();
Text_InputMultiine();

Laya Text(文本类)

从上述代码可以看出，只需设置multiline的值为true即可开启多行输入。

百分购

发表评论

您必须才能发表评论！