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>