mask 遮罩

遮罩，可以设置一个对象(支持位图和矢量图)，根据对象形状进行遮罩显示。【注意】遮罩对象坐标系是相对遮罩对象本身的，和Flash机制不同

下面用代码创建一个圆形的遮罩区域，通过 mask 属性，即可实现遮罩效果。

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(768, 1024,Laya.WebGL);

//将精灵对象设置为全局变量
let imgSprite;

//被切换的图片地址，本次使用的是 LayaAir 2.0.0beta5 版本，图片资源位于 bin/images下
let apaches = ["images/apache_1.png"];

//LoaderManager 类用于批量加载资源.此类是单例，不要手动实例化此类.通过 Laya.loader 访问
//load 方法加载图像资源，仍然返回 LoaderManager对象，所以可以链式操作.加载成功后，通过回调方法绘制图像并添加到舞台
//Handler 是事件处理器类,create 表示从对象池内创建一个Handler，默认会执行一次并立即回收
Laya.loader.load(apaches,Laya.Handler.create(this,function(){
    //创建精灵对象
    imgSprite = new Laya.Sprite();
    imgSprite.pos(200,30);
    
    //laya.resource.Texture(纹理对象),加载完成的图片资源，后期根据它来获取图像的尺寸
    let texture = Laya.loader.getRes(apaches[0]);

    //设置精灵宽高,相当于分别设置width和height属性,width与height表示显示对象的宽高
    //width、height 默认是0，此宽高用于鼠标碰撞检测,并不影响显示对象图像大小，所以必须设置了width与height之后，单击事件才会有效
    //laya.resource.Texture 是一个纹理处理类.width、height 属性表示纹理(图片)实际宽高
    imgSprite.size(texture.width,texture.height);

    //drawTexture 绘制图像时，x,y偏移量不写时默认为0，假如偏移出了 imgSprite 的范围，则会出现点击图片无效，单击精灵位置有效
    imgSprite.graphics.drawTexture(texture);

    //将精灵添加到舞台显示(可以先添加到舞台，之后再对精灵进行处理)
    Laya.stage.addChild(imgSprite);

    //为精灵(图片)绑定单击事件
    imgSprite.on(Laya.Event.CLICK,this,addMask);
}));

//添加遮罩
function addMask(){
    //创建遮罩对象(精灵)
    let maskSprite = new Laya.Sprite();
    //由遮罩精灵获取绘图对象绘制一个圆形的遮罩区域，遮罩对象坐标系是相对遮罩对象本身的，(95,41)表示圆形的原点坐标，50 表示半径
    //第三个参数表示填充颜色，或者填充绘图的渐变对象。
    maskSprite.graphics.drawCircle(95,41,50,"#ff0000");
    //对 图像实现遮罩效果
    imgSprite.mask = maskSprite;
}

官网示例：https://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=MagnifyingGlass

滤镜

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

ColorFilter 颜色滤镜

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

设置颜色滤镜步骤如下：

1、先设置一个(4 * 5)颜色矩阵，如下表示红色。关于颜色矩阵本文不做阐述，请另行查询。
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
];

2、然后用 ColorFilter 构造器传入颜色矩阵创建一个颜色滤镜实例，如：
var redFilter = new Laya.ColorFilter(colorMatrix)

3、最后通过 Spriter 的 filters 属性将颜色滤镜效果叠加到位图中。请看下面的代码。

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(1334, 750,Laya.WebGL);
//创建原图
createImg(0,10);

//创建绿色滤镜图像
createBuleFilter();

//创建灰色滤镜图像
createGrayFilter();

//绘制图像——————这是不加滤镜的原图，返回原图
//x、y 表示图像显示的位置
function createImg(x,y){
    //创建精灵对象
    var imgSprite = new Laya.Sprite();
    imgSprite.pos(x,y);

    //加载并显示图片，不用像 Html Canvas 一样担心图片资源未加载完成的问题
    imgSprite.loadImage("images/apache_1.png");
    //添加到舞台
    Laya.stage.addChild(imgSprite);

    //将图像返回-用于后期灵活的设置各种滤镜
    return imgSprite;
};

//创建绿色滤镜
function createBuleFilter(){
    //创建滤镜颜色矩阵--绿色
    let colorMatrix =  [
        0, 0, 0, 0, 0, //R
        0, 1, 0, 0, 0, //G
        0, 0, 0, 0, 0, //B
        0, 0, 0, 1, 0, //A
    ];
    //创建绿色颜色滤镜
    //ColorFilter是颜色滤镜.使用 ColorFilter 类可以将 4 x 5 矩阵转换应用于输入图像上的每个像素的 RGBA 颜色和 Alpha 值,以生成具有一组新的 RGBA 颜色和 Alpha 值的结果
    //使用构造器创建一个 ColorFilter 实例
    let buleFilter = new Laya.ColorFilter(colorMatrix);

    //创建图像并添加滤镜,Sprite 的 filters 属性可以设置多个滤镜组合,所以值是数组
    createImg(410,10).filters = [buleFilter];
}

//创建灰色滤镜
function createGrayFilter(){
    //创建滤镜颜色矩阵--灰色
    let 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
    ];
    //创建灰色颜色滤镜
    let redFilter = new Laya.ColorFilter(colorMatrix);

    //创建图像并添加滤镜
    createImg(205,10).filters = [redFilter];
}

GlowFilter 发光滤镜

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

特别提醒：

LayaAir 应用 bin/libs 文件夹下存放了 LayaAir 引擎各模块的 JS 文件，项目中需要使用哪个模块就需要在 bin/index.html 或者 index.js 中引入对应的模块包 JS 文件。

其中 laya.filter.js 包含更多 webgl 滤镜，如外发光，阴影，模糊以及其它。意思就是使用颜色滤镜可以不用导入 laya.filter.js 文件，但是使用发光滤镜以及模糊滤镜等时，必须在 bin/index.html 或者 index.js 中导入 laya.filter.js 文件。

会了颜色滤镜之后，发光滤镜就很简单了，代码如下：

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(1334, 750,Laya.WebGL);
//为了滤镜效果更加清晰，设置舞台背景为白色
Laya.stage.bgColor = "#ffffff";

createImg(0,10);
createGlowFilter();
createShadeFilter();
 
//绘制图像——————这是不加滤镜的原图，返回原图
//x、y 表示图像显示的位置
function createImg(x,y){
    //创建精灵对象
    var imgSprite = new Laya.Sprite();
    imgSprite.pos(x,y);
 
    //加载并显示图片，不用像 Html Canvas 一样担心图片资源未加载完成的问题
    imgSprite.loadImage("images/apache_1.png");
    //添加到舞台
    Laya.stage.addChild(imgSprite);
 
    //将图像返回-用于后期灵活的设置各种滤镜
    return imgSprite;
};

//创建发光滤镜
function createGlowFilter(){
     /**
     * 创建发光滤镜
     * @param	color	滤镜的颜色
     * @param	blur	边缘模糊的大小
     * @param	offX	X轴方向的偏移
     * @param	offY	Y轴方向的偏移
     */
    let glowFilter = new Laya.GlowFilter("#E37E31",8,0,0);
 
    //创建图像并添加滤镜,Sprite 的 filters 属性可以设置多个滤镜组合,所以值是数组
    createImg(205,10).filters = [glowFilter];
}

//创建阴影滤镜
function createShadeFilter(){
    let glowFilter = new Laya.GlowFilter("#000000",2,5,2);
    createImg(410,10).filters = [glowFilter];
}

BlurFilter 模糊滤镜

模糊滤镜类 BlurFilter 位于 laya.filters 包中，通过调整 strength 参数设置模糊滤镜的强度，值越大，越模糊，该滤镜只支持WebGL模式下有效。

/**
* 模糊滤镜
* @param strength 模糊滤镜的强度值
*/
constructor(strength?: number);

使用发光滤镜以及模糊滤镜等时，必须在 bin/index.html 或者 index.js 中导入 laya.filter.js 文件。

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(1334, 750,Laya.WebGL);

createImg(0,10);
createBlueFilter1();
createBlueFilter2();
 
//绘制图像——————这是不加滤镜的原图，返回原图
//x、y 表示图像显示的位置
function createImg(x,y){
    //创建精灵对象
    var imgSprite = new Laya.Sprite();
    imgSprite.pos(x,y);
 
    //加载并显示图片，不用像 Html Canvas 一样担心图片资源未加载完成的问题
    imgSprite.loadImage("images/apache_1.png");
    //添加到舞台
    Laya.stage.addChild(imgSprite);
 
    //将图像返回-用于后期灵活的设置各种滤镜
    return imgSprite;
};

//创建模糊滤镜1
function createBlueFilter1(){
   //为设置模糊滤镜的强度值 strength 时，默认为 4
    let blurFilter = new Laya.BlurFilter();
 
    //创建图像并添加滤镜,Sprite 的 filters 属性可以设置多个滤镜组合,所以值是数组
    createImg(205,10).filters = [blurFilter];
}

//创建模糊滤镜2
function createBlueFilter2(){
    let blurFilter = new Laya.BlurFilter(8);
    createImg(410,10).filters = [blurFilter];
}

LayaAir 位图添加遮罩与滤镜

mask 遮罩

滤镜

ColorFilter 颜色滤镜

GlowFilter 发光滤镜

BlurFilter 模糊滤镜

猜你喜欢