Laya 位图

Laya 位图

下面通过具体例子演示Laya位图用法。

用loadImage加载显示图片的示例

Laya.init(800, 600);

Laya.stage.bgColor = "#ffffff";
var img = new Laya.Sprite();
//加载显示图片

var url = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB425.png";
img.loadImage(url, 0, 0, 0, 0, Laya.Handler.create(this, function(){
     console.log(img.width, img.height);
}));

//添加到舞台
Laya.stage.addChild(img);
console.log(img.width, img.height);
// trace(img.getBounds());

PS:img的宽和高度只有在加载完成后，才会被赋值。其它时候获取到的值都是0。

用loadImage切换图片的示例

Laya.init(800, 600);

function switchImg() {
    // 清空图片
    this.img.graphics.clear();
    // 获取要切换的图片的资源路径
    var imgUrl = (this.flag=!this.flag)?this.url1:this.url2;
    // 加载显示图片
    this.img.loadImage(imgUrl, 0, 0, 0, 0, Laya.Handler.create(this, function(){
        console.log(imgUrl);
    }));
}

Laya.stage.bgColor = "#ffffff";
var img = new Laya.Sprite();
//加载显示图片
this.url1 = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB425.png";
this.url2 = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%89%AB%E4%B8%80%E6%89%AB425.png";
this.flag = false;
this.img = new Laya.Sprite();
// 绘制显示的图片
switchImg();
//侦听switchImg中图片区域的点击事件，触发后执行switchImg切换图片
this.img.on(Laya.Event.CLICK, this, switchImg);
// 添加到舞台
Laya.stage.addChild(this.img);

用drawTexture 加载显示图片的示例

loadImage()方法可以即时加载外部图片资源，也可以从缓冲区读取图片资源，drawTexture()方法则必须先加载完图片后，再绘制添加到舞台中来。

Laya.init(800, 600);

function graphicsImg() {
    var img = new Laya.Sprite();
    //获取图片资源，绘制到画布
    img.graphics.drawTexture(Laya.loader.getRes(this.url), 0, 0, 200, 200);
    //添加到舞台
    Laya.stage.addChild(img);
}
// 设置舞台背景色
Laya.stage.bgColor = "#ffffff";
// 图片资源路径
this.url = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB425.png";
//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load(url, Laya.Handler.create(this, graphicsImg));

用drawTexture 切换图片的示例

Laya.init(800, 600);

function graphicsImg() {
    this.img = new Laya.Sprite();
    //添加到舞台
    Laya.stage.addChild(this.img);
    //显示初始化绘制的图片
    switchImg();
    //侦听switchImg中图片区域的点击事件，触发后执行switchImg切换纹理绘制
    this.img.on(Laya.Event.CLICK, this, switchImg);
    //设置图片坐标
    this.img.pos(100, 50);
}

function switchImg() {
    // 清空绘制
    this.img.graphics.clear();
    // 获取要切换的图片资源路径
    var imgUrl = (this.flag = !this.flag) ? this.url2 : this.url1;
    // 获取图片资源
    var texture = Laya.loader.getRes(imgUrl);
    // 绘制纹理
    this.img.graphics.drawTexture(texture);
    //设置纹理宽高
    this.img.size(texture.width, texture.height);
}

// 设置舞台背景色
Laya.stage.bgColor = "#ffffff";
// 图片资源路径
this.url1 = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB425.png";
this.url2 = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%89%AB%E4%B8%80%E6%89%AB425.png";
this.flag = false;
//加载多张图片，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load([this.url1, this.url2], Laya.Handler.create(this, graphicsImg));

圆形的遮罩示例

Laya.init(800, 600);

this.url1 = "https://www.aichiyudemao.com/wp-content/uploads/2017/08/%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB425.png";

function graphicsImg() {
    this.img = new Laya.Sprite();
    // 获取图片资源，绘制到画布
    this.img.graphics.drawTexture(Laya.loader.getRes(this.url1));
    // 添加到舞台
    Laya.stage.addChild(this.img);
    // 创建遮罩对象
    var cMask = new Laya.Sprite();
    // 画一个圆形的遮罩区域
    cMask.graphics.drawCircle(200, 200, 200, "#ff0000");
    // 圆形所在的位置坐标
    console.log(cMask.x, cMask.y);
    // 实现img显示对象的遮罩效果
    img.mask = cMask;
}
// 设置舞台背景色
Laya.stage.bgColor = "#ffffff";
Laya.loader.load(this.url1, Laya.Handler.create(this, graphicsImg));

滤镜效果

LayaAir引擎提供了颜色滤镜、发光（或阴影）滤镜、模糊滤镜三种效果。其中颜色滤镜支持Canvas与WebGL模式，而发光滤镜与模糊滤镜由于对性能的消耗较大，因此仅支持WebGL模式。

• 颜色滤镜

颜色滤镜类 ColorFilter位于laya.filters包中，通过指定矩阵（排列成4 x 5 的矩阵）改变各颜色通道

• 发光滤镜&阴影滤镜

发光滤镜类 GlowFilter位于laya.filters包中，通过调整发光的偏移角度也可以当成阴影滤使用。注意：该滤镜只支持WebGL模式下有效。

• 模糊滤镜

模糊滤镜的设置比较简单，创建一个模糊滤镜实例，然后设置模糊强度，叠加给位图即可，我们直接通过编码查看示例效果。

Laya.init(860, 600,Laya.WebGL);

/* 创建原始位图 */
function createImg(w, h) {
    var img = new Laya.Sprite();
    // 添加到舞台
    Laya.stage.addChild(img);
    // 加载图片
    var url = "https://www.aichiyudemao.com/wp-content/uploads/2017/10/logo.png";
    img.loadImage(url, w, h, 212, 47);
    return img;
}
/* 创建红色滤镜位图 */
function createRedFilter() {
    // 颜色滤镜矩阵,红色
    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);
    var img = createImg(212, 100);
    // 添加红色颜色滤镜效果
    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);
    var img = createImg(424,100);
    // 添加灰色颜色滤镜效果
    img.filters = [GrayFilter];
}
/* 创建发光滤镜位图 */
function createGlowFilter() {
    // 创建发光滤镜位图
    var glowFilter = new Laya.GlowFilter("#ff0000", 15, 0, 0);
    var img = createImg(0, 147);
    // 添加发光滤镜
    img.filters = [glowFilter];
}
/* 创建阴影滤镜位图 */
function createShadeFilter() {
    // 创建阴影滤镜
    var shadeFilter = new Laya.GlowFilter("#000000", 8, 8, 8);
    var img = createImg(212, 147);
    // 添加阴影滤镜
    img.filters = [shadeFilter];
}
/* 创建模糊滤镜位图 */
function createBlurFilter() {
    // 创建模糊滤镜实例
    var blurFilter = new Laya.BlurFilter();
    // 设置模糊强度
    blurFilter.strength = 5;
    var img = createImg(424, 147);
    // 添加模糊滤镜
    img.filters = [blurFilter];
}

Laya.stage.bgColor = "#ffffff";
// 创建原始图片
createImg(0, 100);
// 创建红色滤镜位图
createRedFilter();
// 创建灰色滤镜位图
createGrayFilter();
// 创建发光滤镜位图
createGlowFilter();
// 创建阴影滤镜位图
createShadeFilter();
// 创建模糊滤镜位图
createBlurFilter();