actionscript-3 - flex4.6中的这个动态掩码

Question

我需要为组件制作一个动态蒙版，如下图所示。这些白色圆圈会出现在不同的地方。黑色区域将有内容，白色区域将是透明区域（您可以根据需要更改颜色）。

不知道如何制作这个面具。有什么帮助吗？

Answer 1

这是一个使用 aBitmapImage和它的maskType属性来执行此操作的应用程序。请注意，此技术仅适用于扩展 Spark类BitmapImage的组件和其他组件。GraphicElement

该类GraphicElement定义了一个maskType属性，如果将其设置为MaskType.LUMINOSITY将执行与“正常”屏蔽相反的操作。掩蔽对象中没有绘制任何内容的区域将显示底层对象。蒙版对象中绘制了某些东西的区域将是透明的。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="onCreationComplete()"
               backgroundColor="#0">
    <fx:Script>
        <![CDATA[
            import spark.core.MaskType;

            protected function onCreationComplete():void
            {
                var circles:Array = [
                    { x:25, y:25, radius:20 },
                    { x:100, y:100, radius:50 },
                    { x:200, y:50, radius:25 } ];

                var circleSprite:Sprite=new Sprite();
                drawMaskCircles(circles, circleSprite.graphics);
                image.mask=circleSprite;
                image.maskType=MaskType.LUMINOSITY;
            }

            private function drawMaskCircles(circles:Array, g:Graphics):void
            {
                var l:int = circles.length;
                g.clear();
                g.beginFill(0);
                for (var i:int=0; i<l; i++)
                {
                    var o:Object = circles[i];
                    g.drawCircle(o.x, o.y, o.radius);
                }
                g.endFill();
            }

        ]]>
    </fx:Script>

    <s:BitmapImage id="image" source="klimt12-hp.jpg"/>

</s:Application>

如果您想将此方法用于GraphicElement非BitmapImage. 例如，假设您想屏蔽扩展的组件VGroup：

// assuming component that extends VGroup is a variable named: vgroup
var bmd:BitmapData = new BitmapData(vgroup.width, vgroup.height);
bmd.draw(vgroup);

// now we have captured a snapshot of the component
// show this to the user with a BitmapImage
var vgroupImage:BitmapImage=new BitmapImage();
vgroupImage.source = bmd;

// now apply the circleSprite (created in the code above) as the mask
vgroupImage.mask = circleSprite;
vgroupImage.maskType = MaskType.LUMINOSITY;
addElement(vgroupImage);