ActionScript
TypeScript
JavaScript

添加文本&设置文本样式

发布时间:2017-03-10


在我们的一些项目中,文本是会被经常的使用,免不了为这个文本设置字体大小,字体颜色,文本内容等。

我们先做一个最基本的demo 创建一个文本,给这个文本添加文本内容、设置字体颜色(背景默认为黑,不修改颜色没有效果)。

Laya.display.text 中的关于文本样式的API参数:

image.png

image.png

module laya {
	import Text = Laya.Text;
	export class Text_ComplexStyle {

		constructor() {
			Laya.init(400,600);
			this.createText()
		}

		private createText(): void {
        		var txt = new Text();
        		//给文本的text属性赋值
        		txt.text = "hello_world";
                        txt.color = "#ffffff";
        		Laya.stage.addChild(txt);
		}
	}
}
new laya.Text_ComplexStyle();

image.png

这个时候我们就可以看到txt已经添加到舞台上了,显示了txt中 白色的hello_world。

接着我们给我们的文本添加一些其他的字体样式,粗体、斜体、字体大小等。

image.png

image.png

image.png

module laya {
	import Text = Laya.Text;
	export class Text_ComplexStyle {

		constructor() {
			Laya.init(400,600);
			this.createText()
		}

		private createText(): void {
                var txt = new 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);
		}
	}
}
new laya.Text_ComplexStyle();

image.png

这里我们就可以看到字体样式、字体大小有明显的变化,文本框的最外围又一圈浅蓝色的边框,文本区的背景变为红色。有兴趣的可以修改之中的数值,更深一步的理解这些属性的使用方法。