目录
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);