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>组件加载图像，将其放置在环内，并屏蔽图像，以便只有中心的孔显示图像，就像一个相框。 / p>

可以这样做，还是不可能，因为椭圆中心的“洞”只是看不见的填充物？

感谢您的时间。

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>