反向遮罩 (新手指引 镂空 镂空区域可穿透点击)

 

参考：

新手引导镂空方案

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

 

1、首先建立一个背景

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

 

2、建立一个圆

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

 

3、反向遮罩，让有圆的地方露出来

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".

   这样能够用来作新手指引了额。