Egret Engine（九）：2D渲染-遮罩、遮罩进度条

矩形遮罩

只能看见遮罩层区域

const shp: egret.Shape = new egret.Shape();
shp.graphics.beginFill(0xff0000);
shp.graphics.drawRect(0, 0, 100, 100);
shp.graphics.endFill();
this.addChild(shp);
const rect: egret.Rectangle = new egret.Rectangle(20, 20, 30, 50);
shp.mask = rect; // shp的遮罩层是rect

显示对象遮罩

显示为红色的遮罩层的圆

//画一个红色的正方形
const square: egret.Shape = new egret.Shape();
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();
this.addChild(square);//画一个蓝色的圆形
const circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25, 25, 25);
circle.graphics.endFill();
this.addChild(circle);square.mask = circle;
// square.mask = null; // 通过将 mask 属性设置为 null 可以删除遮罩

利用遮罩层绘制不规则形状对象进度条

const w: number = 150;
const h: number = 300;
const r: number = Math.max(w, h) / 2 * 1.5;const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
this.addChild(container);
container.x = 200;
container.y = 100;const bitmap = new egret.Bitmap(RES.getRes('bg_jpg'));
container.addChild(bitmap);
bitmap.width = w;
bitmap.height = h;const shape: egret.Shape = new egret.Shape();
shape.x = bitmap.width / 2;
shape.y = bitmap.height / 2;
bitmap.mask = shape; // 图片bitmap的遮罩层是shape
container.addChild(shape);let angle = 0;
egret.startTick(function (timeStamp: number): boolean {angle += 1;changeGraphics(angle);angle = angle % 360;return true;
}, this);function changeGraphics(angle) {shape.graphics.clear();shape.graphics.beginFill(0x00ff00, 1);shape.graphics.drawArc(0, 0, r, 0, angle * Math.PI / 180, true);shape.graphics.lineTo(0, 0);shape.graphics.endFill();
}

• 不加遮罩：
  
• 加上遮罩