Wozu dient die HTML5-Maske?

Die Funktion der HTML5-Maske besteht darin, den sichtbaren Bereich eines Anzeigeobjekts anzugeben. Alle Anzeigeobjekte verfügen über eine Maskenfunktion. Die rechteckige Maske bedeutet, dass der sichtbare Bereich des Anzeigeobjekts ein quadratischer Anzeigebereich ist Unregelmäßiger Anzeigebereich; Die Anzeigeobjektmaske ist Der sichtbare Bereich eines Anzeigeobjekts wird durch ein anderes Anzeigeobjekt bestimmt, wodurch eine unregelmäßige Maskierung ermöglicht wird.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, DELL G3-Computer

html5 Wozu dient die Maske?

HTML5-Spiel-Engine – Maske – rechteckige Maske – beides anzeigen und Objektmaske anzeigen – nur das Maskenobjekt anzeigen, das maskierte Objekt ähnelt dem Abschneiden von

Maske

Die Funktion von Beim Maskieren wird der sichtbare Bereich eines Anzeigeobjekts angegeben. Alle Anzeigeobjekte verfügen über eine Maskierungsfunktion.

Rechteckige Maske

Rechteckige Maske, dh der sichtbare Bereich des angezeigten Objekts ist ein quadratischer Anzeigebereich und kein unregelmäßiger Anzeigebereich.

Verwendung: Weisen Sie dem Attribut mask des Anzeigeobjekts ein rechteckiges Objekt zu. mask 属性。

shp.mask = new egret.Rectangle(20,20,30,50);

如果 rect 发生变化，需要重新将 rect 赋值给 shp.mask。

下面示例中绘制了两个 Shape 对象，对其中一个 Shape 使用矩形遮罩，另外一个 Shape 当做参考。代码如下：

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;
    }}

现在对 shp 添加遮罩，具体代码如下：

var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);  shp.mask = rect;

可以看到，红色的正方形添加了遮罩后只显示了(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，但是 maskrrreee

Wenn sich rect ändert, muss rect shp.mask neu zugewiesen werden.

Im folgenden Beispiel werden zwei Shape-Objekte gezeichnet, wobei eine rechteckige Maske für eines der Shape und das andere Shape als verwendet wird eine Referenz. Der Code lautet wie folgt: shp hinzu. Der spezifische Code lautet wie folgt: rrreeeWie Sie sehen können, sind nach dem Hinzufügen der Maske zum roten Quadrat nur noch (20 ,20,30,50 wird angezeigt) Bild dieses Teils. Der grüne Kreis ohne Maske wird weiterhin vollständig angezeigt.

AnzeigeobjektmaskeAnzeigeobjektmaske, dh der sichtbare Bereich des Anzeigeobjekts wird durch ein anderes Anzeigeobjekt bestimmt, wodurch eine unregelmäßige Maskierung erreicht werden kann.

🎜Verwendung: Setzen Sie das mask-Attribut des maskierten Anzeigeobjekts auf das Maskenobjekt: 🎜rrreee🎜Der Anzeigebereich des maskierten Anzeigeobjekts, der im gesamten Anzeigeobjekt als Maske verwendet wird der undurchsichtige Bereich. Der folgende Code erstellt beispielsweise eine Shape-Instanz, die ein rotes Quadrat mit 100 x 100 Pixeln enthält, und eine Sprite-Instanz, die einen blauen Kreis mit einem Radius von 25 Pixeln enthält Stellen Sie die Maske auf ein Quadrat ein. Die quadratische Anzeigefläche ist der Teil, der von der kreisförmigen undurchsichtigen Fläche abgedeckt wird. 🎜rrreee🎜Das als Maske verwendete Anzeigeobjekt kann animiert und dynamisch in der Größe geändert werden. Maskenanzeigeobjekte müssen nicht unbedingt zur Anzeigeliste hinzugefügt werden. Wenn Sie jedoch möchten, dass das Maskenobjekt beim Skalieren der Bühne skaliert wird, oder wenn Sie die Benutzerinteraktion mit dem Maskenobjekt (z. B. Größenänderung) unterstützen möchten, müssen Sie das Maskenobjekt zur Anzeigeliste hinzufügen. 🎜🎜Eine Maske kann entfernt werden, indem das Attribut mask auf null gesetzt wird: 🎜rrreee🎜🎜Sie können nicht ein Maskenobjekt verwenden, um ein anderes Maskenobjekt zu maskieren. 🎜🎜Zeigen Sie das Objekt als Maske an. Es ist nicht erforderlich, mask wie bei einer rechteckigen Maske wiederholt zuzuweisen, aber mask muss ein Element in der Anzeigeliste sein. 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Empfohlenes Lernen: „🎜HTML5-Video-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWozu dient die HTML5-Maske?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!