laya.display.Graphics 的 fillText 与 fillBorderText 、strokeText 方法可以用于绘制文字。如给一个矩形绘制上文本，让其看起来像一个按钮。

fillText

/**在画布上绘制文本。
* @param text 在画布上输出的文本。
* @param x 开始绘制文本的 x 坐标位置（相对于画布）。
* @param y 开始绘制文本的 y 坐标位置（相对于画布）。
* @param font 定义字号和字体，比如"20px Arial"。
* @param color 定义文本颜色，比如"#ff0000"。
* @param textAlign 文本对齐方式，可选值："left"，"center"，"right"。
*/
fillText(text: string, x: number, y: number, font: string, color: string, textAlign: string): FillTextCmd;

//使用立即执行函数方式
(function(){
    //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
    Laya.init(1334, 750,Laya.WebGL);
	
	//btnWidth、btnHeight 分别为按钮的宽与高
	var btnWidth = 150;
	var btnHeight = 50;
 
	var btn_1= addButton("音效1","left");
	btn_1.pos(100,20);

	var btn_2= addButton("音效2","center");
	btn_2.pos(300,20);

	var btn_3= addButton("音效3","right");
	btn_3.pos(500,20);

	//添加按钮——原理就是先绘制一个图形(如矩形)，然后再绘制文字
	function addButton(showText,textAlign){
		let button = new Laya.Sprite();
		button.size(btnWidth,btnHeight);//设置精灵/画布/按钮尺寸
		//绘制一个矩形，起点为(0,0)，这样方便添加文字时对齐文本，可以理解为图像相对的是精灵的原点，但是精灵相对是舞台
		//所以后期只要改变精灵的x,y属性即可放置到舞台的任意位置
		button.graphics.drawRect(0,0,btnWidth,btnHeight,"#0078D7");
		
		//在画布上继续绘制文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、对其方式
		button.graphics.fillText(showText,btnWidth/2,10,"25px Arial","#fff",textAlign);

		Laya.stage.addChild(button);
		return button;
	}
})();

如上图所示，文本对齐方式 textAlign 的可选值 "left"，"center"，"right"的效果一目了然。left 是文本的左侧与x对齐，right是文本的右侧与x对齐，center是文本的中间与x对齐。

fillBorderText

/**在画布上绘制“被填充且镶边的”文本。
* @param text 在画布上输出的文本。
* @param x 开始绘制文本的 x 坐标位置（相对于画布）。
* @param y 开始绘制文本的 y 坐标位置（相对于画布）。
* @param font 定义字体和字号，比如"20px Arial"。
* @param fillColor 定义文本颜色，比如"#ff0000"。
* @param borderColor 定义镶边文本颜色。
* @param lineWidth 镶边线条宽度。
* @param textAlign 文本对齐方式，可选值："left"，"center"，"right"。
*/
fillBorderText(text: string, x: number, y: number, font: string, fillColor: string, borderColor: string, lineWidth: number, textAlign: string): FillBorderTextCmd;

//使用立即执行函数方式
(function(){
    //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
    Laya.init(1334, 750,Laya.WebGL);
	
	//btnWidth、btnHeight 分别为按钮的宽与高
	var btnWidth = 150;
	var btnHeight = 50;
 
	var btn_1= addButton("音效1","left");
	btn_1.pos(100,20);

	var btn_2= addButton("音效2","center");
	btn_2.pos(300,20);

	var btn_3= addButton("音效3","right");
	btn_3.pos(500,20);

	//添加按钮——原理就是先绘制一个图形(如矩形)，然后再绘制文字
	function addButton(showText,textAlign){
		let button = new Laya.Sprite();
		button.size(btnWidth,btnHeight);//设置精灵/画布/按钮尺寸
		//绘制一个矩形，起点为(0,0)，这样方便添加文字时对齐文本，可以理解为图像相对的是精灵的原点，但是精灵相对是舞台
		//所以后期只要改变精灵的x,y属性即可放置到舞台的任意位置
		button.graphics.drawRect(0,0,btnWidth,btnHeight,"#0078D7");
		
		//在画布上继续绘制镶边的文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、镶边线条宽度、以及对其方式
		button.graphics.fillBorderText(showText,btnWidth/2,10,"25px Arial","#fff","#ff0",1,textAlign);

		Laya.stage.addChild(button);
		return button;
	}
})();

strokeText

/**在画布上绘制文本（没有填色）。文本的默认颜色是黑色。
* @param text 在画布上输出的文本。
* @param x 开始绘制文本的 x 坐标位置（相对于画布）。
* @param y 开始绘制文本的 y 坐标位置（相对于画布）。
* @param font 定义字体和字号，比如"20px Arial"。
* @param color 定义文本颜色，比如"#ff0000"。
* @param lineWidth 线条宽度。
* @param textAlign 文本对齐方式，可选值："left"，"center"，"right"。
*/
strokeText(text: string, x: number, y: number, font: string, color: string, lineWidth: number, textAlign: string): StrokeTextCmd;

将上面示例中的代码修改本行：

//在画布上继续绘文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、线条宽度、以及对其方式
button.graphics.strokeText(showText,btnWidth/2,10,"25px Arial","#fff",1,textAlign);

LayaAir graphics 绘制文本

fillText

fillBorderText

strokeText

猜你喜欢