Egret引擎实现多个遮罩

Egret 引擎中DisplayObject 有mask属性，作为遮罩，只显示mask矩形区域内的部分。

但是有一个局限就是，它只有一个矩形，不能实现诸如窗口效果的多区域遮罩。我们可以这样实现，下面以重写Sprite类来实现。

class MultiMasksSprite extends egret.Sprite{

     constructor() {

         super();

     }

     masks: Array<egret.Rectangle> = [];

     public _render(renderContext: egret.RendererContext): void {

         var render = <egret.HTML5CanvasRenderer>renderContext;

         var ctx = render.canvasContext;

         ctx.save();

         ctx.beginPath();

         for (var i = 0; i < this.masks.length; i++) {

             var mask = this.masks[i];

             ctx.rect(mask.x + render._transformTx, mask.y + render._transformTy, mask.width, mask.height);

         }

         ctx.clip();

         ctx.closePath();

         super._render(renderContext);

         ctx.restore();

     }

 }

向masks中添加遮罩区域即可