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

参考：

新手引导镂空方案

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

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

原文地址：https://www.cnblogs.com/gamedaybyday/p/9374959.html