HTML5マスクって何に使うの？

##HTML5 ゲーム エンジン - マスク - 長方形マスク - 2 表示オブジェクトと表示オブジェクトの両方マスク - マスクされたオブジェクトのみが表示され、マスクされたオブジェクトは切り取られるのと似ています。 Mask

マスクの機能は、表示オブジェクトの可視領域を指定することです。表示オブジェクトはすべてマスキング機能を持っています。

長方形マスク長方形マスク、つまり表示オブジェクトの可視領域は、不規則な表示領域ではなく正方形の表示領域です。

使用法: 長方形オブジェクトを表示オブジェクトの

プロパティに割り当てます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">shp.mask = new egret.Rectangle(20,20,30,50);</pre><div class="contentsignin">ログイン後にコピー</div></div>

rect

が変更された場合は、rect を shp.mask に再割り当てする必要があります。

次の例では、2 つの

オブジェクトが描画されます。1 つの Shape は長方形のマスクとして使用され、もう 1 つの Shape は参照として使用されます。コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">class Test extends egret.DisplayObjectContainer{     public constructor()     {         super();         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);     }     private onAddToStage(event:egret.Event)     {         var shp:egret.Shape = new egret.Shape();         shp.graphics.beginFill( 0xff0000 );         shp.graphics.drawRect( 0,0,100,100);         shp.graphics.endFill();         this.addChild( shp );         var shp2:egret.Shape = new egret.Shape();         shp2.graphics.beginFill( 0x00ff00 );         shp2.graphics.drawCircle( 0,0, 20);         shp2.graphics.endFill();         this.addChild( shp2 );         shp2.x = 20;         shp2.y = 20;     }}</pre><div class="contentsignin">ログイン後にコピー</div></div> 次に、マスクを

に追加します。具体的なコードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);  shp.mask = rect;</pre><div class="contentsignin">ログイン後にコピー</div></div> ご覧のとおり、マスクを

に追加した後、赤い四角、この部分の ( 20,20,30,50) のみの画像。マスクなしの緑色の円は完全に表示されたままです。

表示オブジェクト マスク

表示オブジェクト マスク、つまり表示オブジェクトの可視領域は別の表示オブジェクトによって決定され、不規則なマスキングを実現できます。

使用法: マスクされた表示オブジェクトの mask 属性をマスク オブジェクトに設定します:

//将maskSprite设置为mySprite的遮罩
mySprite.mask = maskSprite;

マスクされた表示オブジェクトの表示領域は、マスクはオブジェクトの不透明な領域をすべて表示します。たとえば、次のコードは、100 x 100 ピクセルの赤い正方形を含む Shape インスタンスと、半径 25 ピクセルの青い円を含む Sprite インスタンスを作成します。四角いマスク。正方形の表示領域は、円形の不透明領域で覆われた部分です。

//画一个红色的正方形
 var square:egret.Shape = new egret.Shape();
 square.graphics.beginFill(0xff0000);
 square.graphics.drawRect(0,0,100,100);
 square.graphics.endFill();
 this.addChild(square);//画一个蓝色的圆形var 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;

マスクとして使用される表示オブジェクトはアニメーション化し、動的にサイズ変更できます。マスク表示オブジェクトは、必ずしも表示リストに追加する必要はありません。ただし、ステージの拡大縮小時にマスク オブジェクトも拡大縮小したい場合、またはマスク オブジェクトとのユーザー操作 (サイズ変更など) をサポートしたい場合は、マスク オブジェクトを表示リストに追加する必要があります。

マスクは、mask プロパティを null に設定することで削除できます:

mySprite.mask = null;

あるマスク オブジェクトを使用して別のマスク オブジェクトをマスクすることはできませんマスクオブジェクト。

オブジェクトをマスクとして表示します。長方形マスクのように mask を繰り返し割り当てる必要はありませんが、mask は表示リスト内の要素である必要があります。