反向遮罩 (新手指引 鏤空 鏤空區域可穿透點擊)

 

參考：

新手引導鏤空方案

使用RenderTexture創建反遮罩或橡皮擦

 

一、首先創建一個背景

let bg:eui.Image = new eui.Image(RES.getRes("bg_jpg"));
this.addChild(bg);

 

二、創建一個圓

let sp:egret.Sprite = new egret.Sprite();
sp.graphics.beginFill(0xff0000);
sp.graphics.drawCircle(100,100,100);
sp.graphics.endFill();
this.addChild(sp);

 

三、反向遮罩，讓有圓的地方露出來

init直接照搬論壇老兄的，我這里就沒有封裝了，反正只是做測試，無所謂了

    public init(dp:egret.DisplayObject, w:number, h:number):void {
            let container:egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
 
            let bg:egret.Shape = new egret.Shape();
            bg.graphics.beginFill(0x000000, 0.8);
            bg.graphics.drawRect(0, 0, w, h);
            bg.graphics.endFill();
 
            container.addChild(bg);
 
            container.addChild(dp);
 
            dp.blendMode = egret.BlendMode.ERASE;
 
            let renderTexture:egret.RenderTexture = new egret.RenderTexture();
            renderTexture.drawToTexture(container);
 
            let bitmap:egret.Bitmap = new egret.Bitmap(renderTexture);
            this.addChild(bitmap);
            bitmap.touchEnabled = true;  //允許點擊
            bitmap.pixelHitTest = true;  //鏤空區域不響應點擊，這樣可以穿透點擊到下面的背景
    }

　　

   this.init(sp, 500,500);

   bg.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
       console.log("bg hit");
   },this);

 

    這時，當我們點擊黑色區域時，是不會輸出"hit bg"的。

   點擊鏤空區域時，會輸出"hit bg".

   這樣可以用來做新手指引了額。