Egret 遮罩官网案例

最新推荐文章于 2022-05-24 17:08:32 发布

原创最新推荐文章于 2022-05-24 17:08:32 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Egret

当前文章被收录于：

Egret

29 篇文章 4 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Egret框架中利用遮罩技术实现图形的精确裁剪。通过创建矩形和圆形两个形状对象，将圆形作为遮罩应用于矩形上，从而达到圆形范围内的图形显示效果。此方法适用于游戏开发中需要精确控制图形显示区域的场景。

// 遮罩
module game {
    export class Test extends egret.DisplayObjectContainer {
        public constructor() {
            super();
            this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        }
        private onAddToStage(event: egret.Event) {
            var square : egret.Shape = new egret.Shape();
            square.graphics.beginFill(0xff0000);
            square.graphics.drawRect(100,100,100,100);
            square.graphics.endFill();
            this.addChild(square);

            var circle:egret.Shape = new egret.Shape();
            circle.graphics.beginFill(0x0000ff);
            circle.graphics.drawCircle(150,150,25);
            circle.graphics.endFill();
            this.addChild(circle);
            square.mask = circle;
        }
    }
}

效果如下