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

 

参考：

新手引导镂空方案

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

   这样可以用来做新手指引了额。