ホームページ > 記事 > ウェブフロントエンド > HTML5マスクって何に使うの?
html5 マスクの機能は、表示オブジェクトの可視領域を指定することです。すべての表示オブジェクトにはマスク機能があります。長方形マスクは、表示オブジェクトの可視領域が正方形であることを意味します不規則な表示領域ではなく、表示領域。表示オブジェクトのマスキングとは、表示オブジェクトの可視領域が、不規則なマスキングを実現できる別の表示オブジェクトによって決定されることを意味します。
このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター
html5 の用途マスキング?
##HTML5 ゲーム エンジン - マスク - 長方形マスク - 2 表示オブジェクトと表示オブジェクトの両方マスク - マスクされたオブジェクトのみが表示され、マスクされたオブジェクトは切り取られるのと似ています。 Mask
使用法: 長方形オブジェクトを表示オブジェクトの
mask プロパティに割り当てます。 <pre class="brush:php;toolbar:false">shp.mask = new egret.Rectangle(20,20,30,50);</pre>
rectShapeが変更された場合は、
次の例では、2 つのrect
をshp.mask
に再割り当てする必要があります。
オブジェクトが描画されます。1 つの Shape
は長方形のマスクとして使用され、もう 1 つの Shape
は参照として使用されます。コードは次のとおりです: <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>
次に、マスクを
に追加します。具体的なコードは次のとおりです: <pre class="brush:php;toolbar:false">var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50); shp.mask = rect;</pre>
ご覧のとおり、マスクを
に追加した後、赤い四角、この部分の ( 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
は表示リスト内の要素である必要があります。
以上がHTML5マスクって何に使うの?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。