1：Text的用法
效果如下：
展示效果
2：loadImage的用法，可以用来加载图片
Laya.init(600,400)
Laya.stage.bgColor="green"
var a=new Laya.Sprite()//等同于this.a=new Laya.Sprite(),也可以是a=new Laya.Sprite()
a.loadImage("res/images/1.png",0,0,500,300)
Laya.stage.addChild(a)
效果如下：
再来一个例子(点击图片进行切换)
//初始化舞台
Laya.init(350, 350);
//需要切换的图片资源路径
this.monkey1 = "res/images/1.png";
this.monkey2 = "res/images/123.png";
//切换状态
this.flag = false;
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
this.img = new Laya.Sprite();
//显示绘制的图片
switchImg();
//侦听switchImg中图片区域的点击事件，触发后执行switchImg切换图片
this.img.on(Laya.Event.CLICK,this,switchImg);
//添加到舞台
Laya.stage.addChild(img);
function switchImg(){
//清空图片
this.img.graphics.clear();
//获得要切换的图片资源路径
var imgUrl = (this.flag = !this.flag)? this.monkey1:this.monkey2;
//加载显示图片，坐标位于100,50
this.img.loadImage(imgUrl, 0, 0,300,300);
}
效果如下：
3：drawTexture加载图片的方式，如下
//初始化舞台
Laya.init(750, 450);
//需要切换的图片资源路径
this.monkey2 = "res/images/1.png";
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load(this.monkey2,Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
var img = new Laya.Sprite();
//获取图片资源，绘制到画布
img.graphics.drawTexture(Laya.loader.getRes(this.monkey2),0,0,700,400);
//添加到舞台
Laya.stage.addChild(img);
}
效果如下：
另一个例子(点击切换图片)
//初始化舞台
Laya.init(1334, 750);
//需要切换的图片资源路径
this.monkey1 = "res/images/1.png";
this.monkey2 = "res/images/123.png";
//切换状态
this.flag = false;
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//加载多张图片，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load([this.monkey1,this.monkey2],Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
//创建一个实例
this.img = new Laya.Sprite();
//添加到舞台
Laya.stage.addChild(this.img);
//显示初始化绘制的图片
switchImg();
//侦听switchImg中图片区域的点击事件，触发后执行switchImg切换纹理绘制
this.img.on(Laya.Event.CLICK,this,switchImg);
//设置图片坐标s
this.img.pos(100,50);
}
function switchImg(){
//清空绘制
this.img.graphics.clear();
//获得要切换的图片资源路径
var imgUrl = (this.flag = !this.flag)? this.monkey2:this.monkey1;
//获取图片资源
var texture = Laya.loader.getRes(imgUrl);
//绘制纹理
this.img.graphics.drawTexture(texture);
//设置纹理宽高
this.img.size(texture.width, texture.height);
}
效果如下：
4：给图片设置遮罩
(function () {
var Sprite = Laya.Sprite;
var Texture = Laya.Texture;
var Handler = Laya.Handler;
var Res;
var img;
(function () {
Laya.init(1136, 640);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff"
//资源路径
Res = "res/images/1.png";
//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load(Res, Handler.create(this, graphicsImg));
})();
function graphicsImg() {
img = new Sprite();
//获取图片资源，绘制到画布
img.graphics.drawTexture(Laya.loader.getRes(Res), 150, 50);
//添加到舞台
Laya.stage.addChild(img);
//创建遮罩对象
var cMask = new Sprite();
//画一个圆形的遮罩区域
cMask.graphics.drawCircle(80, 80, 50, "#ff0000");
//圆形所在的位置坐标
cMask.pos(120, 50);
//实现img显示对象的遮罩效果
img.mask = cMask;
}
})();
效果如下：
5：给图片设置滤镜
5.1：颜色滤镜
//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//红色滤镜
creteRedFilter();
//灰色滤镜
createGrayFilter();
/**创建位图**/
function createImg(w,h){
var Img = new Laya.Sprite();
//添加到舞台
Laya.stage.addChild(Img);
//加载显示图片
Img.loadImage("res/images/1.png",w,h,180,180);
return Img;
}
/**创建红色滤镜位图**/
function creteRedFilter(){
//颜色滤镜矩阵,红色
var colorMatrix =
[
1, 0, 0, 0, 0, //R
0, 0, 0, 0, 0, //G
0, 0, 0, 0, 0, //B
0, 0, 0, 1, 0, //A
];
//创建红色颜色滤镜
var redFilter = new Laya.ColorFilter(colorMatrix);
//在坐标280,50位置创建一个位图
var img = createImg(280,50);
//添加红色颜色滤镜效果
img.filters = [redFilter];
}
/**创建灰色滤镜位图**/
function createGrayFilter(){
//颜色滤镜矩阵,灰色
var colorMatrix =
[
0.3086, 0.6094, 0.0820, 0, 0, //R
0.3086, 0.6094, 0.0820, 0, 0, //G
0.3086, 0.6094, 0.0820, 0, 0, //B
0, 0, 0, 1, 0, //A
];
//创建灰色颜色滤镜
var GrayFilter = new Laya.ColorFilter(colorMatrix);
//在坐标460,50位置创建一个位图
var img = createImg(460,50);
//添加灰色颜色滤镜效果
img.filters = [GrayFilter];
}
效果如下：
5.2：发光滤镜
//初始化舞台
Laya.init(1334,750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//发光滤镜
createGlowFilter();
//阴影滤镜
createShadeFilter();
/**创建位图**/
function createImg(w,h){
var Img = new Laya.Sprite();
//添加到舞台
Laya.stage.addChild(Img);
//加载显示图片，坐标位于100,50
Img.loadImage("res/images/1.png",w,h,150,150);
return Img;
}
/**创建发光滤镜位图**/
function createGlowFilter(){
//创建发光滤镜位图
var glowFilter = new Laya.GlowFilter("#ff0000",15,0,0);
//在坐标280,50创建位图
var img = createImg(280,50);
//添加发光滤镜
img.filters = [glowFilter];
}
/**创建阴影滤镜位图**/
function createShadeFilter(){
//创建阴影滤镜
var glowFilter = new Laya.GlowFilter("#000000",8,8,8);
//在坐标460,50创建位图
var img = createImg(460,50);
//添加阴影滤镜
img.filters = [glowFilter];
}
效果如下：
5.3： 模糊滤镜
//初始化舞台
Laya.init(1334,750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//模糊滤镜
createBlurFilter();
/**创建位图**/
function createImg(w,h){
var Img = new Laya.Sprite();
//添加到舞台
Laya.stage.addChild(Img);
//加载显示图片，坐标位于100,50
Img.loadImage("res/images/1.png",w,h,150,150);
return Img;
}
/**创建糊滤滤镜位图**/
function createBlurFilter(){
//创建模糊滤镜实例
var blurFilter = new Laya.BlurFilter();
//设置模糊强度
blurFilter.strength = 5;
//在坐标280,50创建位图
var img = createImg(280,50);
//添加滤镜效果
img.filters = [blurFilter];
}
效果如下：
