Question

我需要为组件制作动态遮罩，如下图所示。这些白色圆圈将出现在不同的地方。黑色区域将包含内容，白色区域将是透明区域（如果您愿意，可以更改颜色）。

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

enter image description here

Answer 1

这是一款使用BitmapImage及其maskType属性的应用。请注意，此技术仅适用于BitmapImage以及扩展Spark 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一起使用。 1}}。例如，假设您要屏蔽扩展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);

这个动态掩码在flex4.6中

1 个答案: