zoukankan      html  css  js  c++  java
  • 反向遮罩 (新手指引 镂空 镂空区域可穿透点击)

    参考:

    新手引导镂空方案

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

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

      

     

  • 相关阅读:
    js自执行函数的几种不同写法的比较
    chrome浏览器font-size<12px无效解决办法
    清楚浮动的那些事
    css中font-family的中文字体
    雅虎34条军规
    Modernizr的介绍和使用
    手机也能拍大片
    响应式Web设计 – 布局
    JAVA基础-JDBC连接池
    JAVA基础-JDBC使用
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9374959.html
Copyright © 2011-2022 走看看