本教程操作环境:windows10系统、HTML5版、DELL G3电脑html5 遮罩 有什么用?html5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物,被遮罩物类似切除遮罩遮罩的作用是指定一个显示对象的
本教程操作环境:windows10系统、HTML5版、DELL G3电脑
html5 遮罩 有什么用?
html5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物,被遮罩物类似切除
遮罩的作用是指定一个显示对象的可见区域,所有显示对象都具备遮罩功能。
矩形遮罩,即显示对象的可见区域是方形显示区域而非不规则显示区域。
用法为:将一个矩形对象赋值给显示对象的 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
,但是mask
必须是显示列表里的元素。
以上就是html5 遮罩 有什么用的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: html5 遮罩 有什么用
本文链接: https://lsjlt.com/news/206868.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0