LayaAir graphics 绘制文本

不念不忘少年蓝@ 2022-04-03 09:13 331阅读 0赞

**目录**

fillText

fillBorderText

strokeText

--------------------

[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;
    	}
    })();

![20181221144154843.png][]

如上图所示，文本对齐方式 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;
    	}
    })();

![20181221144554231.png][]

# 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);

![20181221144834744.png][]

[laya.display.Graphics]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Graphics#fillBorderText%28%29
[20181221144154843.png]: /images/20220403/2273969e458c4b0ab5ff11b485274dbd.png
[20181221144554231.png]: /images/20220403/a4f98e9783074c6fb1f44e93ff731c3f.png
[20181221144834744.png]: /images/20220403/aeb08c7324a54095a1f398d9d2989f43.png