[]类似抠图、挖空效果的实现

package  {
    
    import laya.display.Sprite;
    import laya.display.Stage;
    import laya.utils.HitArea;
    
    /**
     * ...
     * @author yung
     */
    public class LayaAirDemo {
        private var red:Sprite;
        private var box:Sprite;
        
        public function LayaAirDemo() {
            Laya.init(1200, 800);
            Laya.stage.bgColor = "#efefef";
            Laya.stage.alignH = Stage.ALIGN_CENTER;
            Laya.stage.alignV = Stage.ALIGN_MIDDLE;
            
            //绘制一个蓝色方块，不被抠图
            var blue:Sprite = new Sprite();
            blue.graphics.drawRect(0, 0, 500, 500, "#004080");
            blue.pos(150, 150);
            blue.size(500, 500);
            blue.on("click", this, onClick);
            Laya.stage.addChild(blue);
            
            //增加一个容器
            box = new Sprite();
            //设置容器为画布缓存
            box.cacheAs = "bitmap";
            box.pos(200, 200);
            Laya.stage.addChild(box);
            
            //绘制红色方块
            var red:Sprite = new Sprite();
            red.graphics.drawRect(0, 0, 500, 500, "#ff0000");            
            box.addChild(red);
            
            //绘制一个圆形区域，利用叠加模式，抠除上面红色区域
            var circle:Sprite = new Sprite();
            circle.graphics.drawCircle(0, 0, 50, "#ffff00");
            circle.pos(50, 50);
            //设置叠加模式
            circle.blendMode = "destination-out";
            box.addChild(circle);            
            
            var area:HitArea = new HitArea();
            area.hit.drawRect(0, 0, 500, 500, "#ff0000");
            area.unHit.drawCircle(250, 250, 50, "#ff0000");
            box.hitArea = area;
            box.mouseEnabled = true;
            box.on("click", this, onBoxClick);
            
            //绘制黑色区域，不被抠图
            var black:Sprite = new Sprite();
            black.graphics.drawRect(0, 0, 200, 200, "#000000");
            black.pos(250, 250);
            Laya.stage.addChild(black);
        }
        
        private function onBoxClick():void {
            trace("box");
        }
        
        private function onClick():void {
            trace("blue");
        }
    }
}

赞~\(≧▽≦)/~

这一句：

area.unHit.drawCircle(250, 250, 50, "#ff0000");

应该改成

area.unHit.drawCircle(50, 50, 50, "#ff0000");

才能达到演示抠图效果的目的吧~
 
另外，如果点击区域演示想更完美一些，黑色区域也得修改一下：

//绘制黑色区域，不被抠图

var black:Laya.Sprite = new Laya.Sprite();

black.graphics.drawRect(0, 0, 200, 200, "#000000");

black.pos(250, 250);



// ------- 新增部分 -------

var bArea:Laya.HitArea = new Laya.HitArea();

bArea.hit.drawRect(0, 0, 200, 200, "#000000");

black.hitArea = bArea;

black.mouseEnabled = true;

// ------- 新增部分 -------



Laya.stage.addChild(black);

那么问题来了 因为必须使用 box.cacheAs = "bitmap";
 circle遮罩圆如果到达坐标2048*2048附近或者超过以后就没有效果了，就变成了一个黑色的圆，也是说守到cacheAs = "bitmap"属性2048*2048的限制，也就是说整个镂空表现不能超过2048*2048