遮罩显示对象

Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本

可以通过将一个显示对象用作遮罩来创建一个孔洞,透过该孔洞使另一个显示对象的内容可见。

定义遮罩

若要指示一个显示对象将是另一个显示对象的遮罩,请将遮罩对象设置为被遮罩的显示对象的 mask 属性:

// Make the object maskSprite be a mask for the object mySprite. 
mySprite.mask = maskSprite;

被遮罩的显示对象显示在用作遮罩的显示对象的全部不透明区域之内。例如,下面的代码将创建一个包含 100 x 100 个像素的红色正方形的 Shape 实例和一个包含半径为 25 个像素的蓝色圆的 Sprite 实例。单击圆时,它被设置为正方形的遮罩,所以显示的正方形部分只是由圆完整部分覆盖的那一部分。换句话说,只有红色圆可见。

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.Shape; 
 
// Draw a square and add it to the display list. 
var square:Shape = new Shape(); 
square.graphics.lineStyle(1, 0x000000); 
square.graphics.beginFill(0xff0000); 
square.graphics.drawRect(0, 0, 100, 100); 
square.graphics.endFill(); 
this.addChild(square); 
 
// Draw a circle and add it to the display list. 
var circle:Sprite = new Sprite(); 
circle.graphics.lineStyle(1, 0x000000); 
circle.graphics.beginFill(0x0000ff); 
circle.graphics.drawCircle(25, 25, 25); 
circle.graphics.endFill(); 
this.addChild(circle); 
 
function maskSquare(event:MouseEvent):void 
{ 
    square.mask = circle; 
    circle.removeEventListener(MouseEvent.CLICK, maskSquare); 
} 
 
circle.addEventListener(MouseEvent.CLICK, maskSquare);

用作遮罩的显示对象可拖动、设置动画,并可动态调整大小,可以在单个遮罩内使用单独的形状。遮罩显示对象不一定需要添加到显示列表中。但是,如果希望在缩放舞台时也缩放遮罩对象,或者如果希望支持用户与遮罩对象的交互(如用户控制的拖动和调整大小),则必须将遮罩对象添加到显示列表中。只要遮罩对象已添加到显示列表中,显示对象的实际 z 索引(从前到后的顺序)就无关紧要了。(除了显示为遮罩对象外,遮罩对象将不会出现在屏幕上。)如果遮罩对象是包含多个帧的一个 MovieClip 实例,则遮罩对象会沿其时间轴播放所有帧,如果没有用作遮罩对象,也会出现同样的情况。通过将 mask 属性设置为 null 可以删除遮罩:

// remove the mask from mySprite 
mySprite.mask = null;

不能使用一个遮罩对象来遮罩另一个遮罩对象。不能设置遮罩显示对象的 alpha 属性。只有填充可用于作为遮罩的显示对象中;笔触都会被忽略。

AIR 2

如果通过设置 cacheAsBitmap cacheAsBitmapMatrix 属性来缓存被遮罩显示对象,则遮罩必须是被遮罩显示对象的子级。类似地,如果被遮罩显示对象是被缓存的显示对象容器的子项,则遮罩和显示对象都必须是该容器的子项。如果被遮罩对象是多个缓存显示对象容器的子项,则遮罩必须是距离显示列表中被遮罩对象最近的缓存容器的子项。

关于遮蔽设备字体

您可以使用显示对象遮罩用设备字体设置的文本。当使用显示对象遮罩用设备字体设置的文本时,遮罩的矩形边框会用作遮罩形状。也就是说,如果为设备字体文本创建了非矩形的显示对象遮罩,则 SWF 文件中显示的遮罩将是遮罩的矩形边框的形状,而不是遮罩本身的形状。

Alpha 通道遮罩

如果遮罩显示对象和被遮罩的显示对象都使用位图缓存,则支持 Alpha 通道遮罩,如下所示:

// maskShape is a Shape instance which includes a gradient fill. 
mySprite.cacheAsBitmap = true; 
maskShape.cacheAsBitmap = true; 
mySprite.mask = maskShape;

例如,Alpha 通道遮罩的一个应用是对遮罩对象使用应用于被遮罩显示对象之外的滤镜。

在下面的示例中,将一个外部图像文件加载到舞台上。该图像(更确切地说,是加载图像的 Loader 实例)将是被遮罩的显示对象。渐变椭圆(中心为纯黑色,边缘淡变为透明)绘制在图像上;这就是 Alpha 遮罩。两个显示对象都打开了位图缓存。椭圆设置为图像的遮罩,然后使其可拖动。

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.GradientType; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.geom.Matrix; 
import flash.net.URLRequest; 
 
// Load an image and add it to the display list. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
// Create a Sprite. 
var oval:Sprite = new Sprite(); 
// Draw a gradient oval. 
var colors:Array = [0x000000, 0x000000]; 
var alphas:Array = [1, 0]; 
var ratios:Array = [0, 255]; 
var matrix:Matrix = new Matrix(); 
matrix.createGradientBox(200, 100, 0, -100, -50); 
oval.graphics.beginGradientFill(GradientType.RADIAL, 
                                colors, 
                                alphas, 
                                ratios, 
                                matrix); 
oval.graphics.drawEllipse(-100, -50, 200, 100); 
oval.graphics.endFill(); 
// add the Sprite to the display list 
this.addChild(oval); 
 
// Set cacheAsBitmap = true for both display objects. 
loader.cacheAsBitmap = true; 
oval.cacheAsBitmap = true; 
// Set the oval as the mask for the loader (and its child, the loaded image) 
loader.mask = oval; 
 
// Make the oval draggable. 
oval.startDrag(true);