Flex 4 使用椭圆作为蒙版

Question

Flex 中有没有办法绘制<s:Ellipse> 并使用它来遮盖图像？这是我写的<s:Ellipse>：

<s:Ellipse id="imageFrame" width="150" height="150" rotation="325" top="50" left="50">
    <s:stroke>
        <s:LinearGradientStroke weight="5">
            <s:GradientEntry color="0x000000"/>
            <s:GradientEntry color="0xFFFFFF"/>
            <s:GradientEntry color="0x000000"/>
        </s:LinearGradientStroke>
    </s:stroke>
</s:Ellipse>

...看起来像这样：

我想使用<s:Image> 组件加载图像，将其放置在环内，并遮盖图像，以便只有中心的孔显示图像，就像相框一样。

可以做到吗，还是因为椭圆中心的“洞”只是不可见的填充而无法做到？

感谢您的宝贵时间。

Answer 1

一种方法是通过在SpriteVisualElement 显示对象的图形上画一个圆圈来屏蔽图像。

<?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"
               backgroundColor="0x0">

    <fx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                var g:Graphics = imageMask.graphics;
                g.clear();
                g.beginFill(0xff);
                g.drawEllipse(50, 50, 150, 150);
                g.endFill();
            }
        ]]>
    </fx:Script>

    <s:Image id="image"
             mask="{imageMask}"
             source="http://www.artyfactory.com/art_appreciation/art_movements/art%20movements/cubism/still_life_with_mandolin.jpg" />

    <s:SpriteVisualElement id="imageMask" />

    <s:Ellipse id="imageFrame"
               width="150"
               height="150"
               rotation="325"
               top="50"
               left="50">
        <s:stroke>
            <s:LinearGradientStroke weight="5">
                <s:GradientEntry color="0x000000" />
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0x000000" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Ellipse>

</s:Application>