LayaAir 位图添加遮罩与滤镜

灰太狼 2022-04-05 11:49 695阅读 0赞

**目录**

mask 遮罩

滤镜

ColorFilter 颜色滤镜

GlowFilter 发光滤镜

BlurFilter 模糊滤镜

内存优化

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

# mask 遮罩 #

[laya.display.Sprite mask][] 属性如下：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Sprite#mask" rel="nofollow">mask</a> : Sprite <p>遮罩，可以设置一个对象(支持位图和矢量图)，根据对象形状进行遮罩显示。 【注意】遮罩对象坐标系是相对遮罩对象本身的，和Flash机制不同</p> </td> 
  </tr> 
 </tbody> 
</table>

![20181212140123917.png][]

下面用代码创建一个圆形的遮罩区域，通过 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;
    }

![2018121214362343.gif][]

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

# 滤镜 #

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

## ColorFilter 颜色滤镜 ##

颜色滤镜类 [ColorFilter 位于 laya.filters ][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 属性][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];
    }

![2018121216131273.png][]

## GlowFilter 发光滤镜 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

> 特别提醒：
> 
> 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 文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

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

//初始化舞台,设置大小,当浏览器不支持 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];
    }

![201812121710322.png][]

## BlurFilter 模糊滤镜 ##

模糊滤镜类 [BlurFilter 位于 laya.filters 包][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];
    }

![20181212171701697.png][]

# 内存优化 #

1、尝试尽量减少使用滤镜效果，将滤镜（BlurFilter 和 GlowFilter）应用于显示对象时，运行时将在内存中创建两张位图。其中每个位图的大小与显示对象相同。将第一个位图创建为显示对象的栅格化版本，然后用于生成应用滤镜的另一个位图：

![5][]

2、如上图为应用滤镜时内存中的两个位图。

3、当修改滤镜的某个属性或者显示对象时，内存中的两个位图都将更新以创建生成的位图，这两个位图可能会占用大量内存。此外，此过程涉及CPU计算，动态更新时将会降低性能。

4、ColorFiter在Canvas渲染下需要计算每个像素点，而在WebGL下的GPU消耗可以忽略不计。

5、最佳的做法是，尽可能使用图像创作工具创建的位图来模拟滤镜，避免在运行时中创建动态位图，可以帮助减少CPU或GPU负载，特别是一张应用了滤镜并且不会在修改的图像。

[laya.display.Sprite mask]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#mask
[20181212140123917.png]: /images/20220405/740e721773824a839688479a091b5db5.png
[2018121214362343.gif]: /images/20220405/15a127ee3a4142f098ba966b841b4b5d.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_Sprite_name_MagnifyingGlass]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=MagnifyingGlass
[ColorFilter _ laya.filters]: https://layaair.ldc.layabox.com/api/?category=Filter&class=laya.filters.ColorFilter
[filters]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#filters
[2018121216131273.png]: /images/20220405/33a3518e80e64d709041e0f1c4af913c.png
[GlowFilter _ laya.filters]: https://layaair.ldc.layabox.com/api/?category=Filter&class=laya.filters.GlowFilter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220405/67c555d9c03e466395d49e6fdf216138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220405/ecb43bf893c74923a6d82f3794a40216.png
[201812121710322.png]: /images/20220405/9775ac468aac4916bad1692473dc56ab.png
[BlurFilter _ laya.filters]: https://layaair.ldc.layabox.com/api/?category=Filter&class=laya.filters.BlurFilter
[20181212171701697.png]: /images/20220405/651e0a9038ae4024aab6c8a2c1edf227.png
[5]: /images/20220405/8bed3925128a45b2937986b162bae5be.png