目錄

mask 遮罩

濾鏡

ColorFilter 顏色濾鏡

GlowFilter 發光濾鏡

BlurFilter 模糊濾鏡

mask 遮罩

laya.display.Sprite mask 屬性如下：

下面用程式碼建立一個圓形的遮罩區域，通過 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

     設定顏色濾鏡步驟如下：

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];
}