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

 

参考:

新手引导镂空方案

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

发布了0 篇原创文章 · 获赞 13 · 访问量 8万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览