如何用透明邊框和圓角創建Flex圖像？

Question

我有一個Flex項目中的照片：

<s:Image source="@Embed('images/photo.png')" /> 

---

但現在我想知道如果我能在Flex中（4/4.5使此圖像作爲下面的圖片，/4.6）（在MXML和/或ActionScript 3的）：

這可能嗎？

Answer 1

這是您應該能夠移植到Flex的feathering mask tutorial in flash。

Answer 2

是的，它是可能的，首先你需要創建一個使用AI或PS

1. 在Photoshop中創建或AI掩模圓邊角和內陰影遮罩層。如果您使用PS，它必須是矢量蒙版。
2. 將其導入Flash催化劑。如果您使用PS，則必須在導入對話框中選擇「形狀圖層>保持可編輯」。
3. 在圖層面板中，您會看到一個組中包含您的蒙面內容。任何進入該組的內容都將被屏蔽。
4. 在蒙版組內添加一個圖像，並在Flash催化劑的代碼視圖中複製蒙版代碼。 （FC）

現在，爲火花圖像創建一個皮膚類，並將掩碼添加到imageDisplay（BitmapImage）上方。

MaskedImageSkin.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
     alpha.disabled="0.5"> 

    <s:states> 
     <s:State name="uninitialized" /> 
     <s:State name="loading"/> 
     <s:State name="ready" /> 
     <s:State name="invalid" /> 
     <s:State name="disabled" /> 
    </s:states> 

    <fx:Script fb:purpose="styling"> 
     <![CDATA[   
      /** 
      * @private 
      */ 
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void 
      { 
       // Push backgroundColor and backgroundAlpha directly. 
       // Handle undefined backgroundColor by hiding the background object. 
       if (isNaN(getStyle("backgroundColor"))) 
       { 
        background.visible = false; 
        background.includeInLayout = false; 
       } 
       else 
       { 
        background.visible = true; 
        background.includeInLayout = true; 
        bgFill.color = getStyle("backgroundColor"); 
        bgFill.alpha = getStyle("backgroundAlpha"); 
       } 

       super.updateDisplayList(unscaledWidth, unscaledHeight); 
      } 
     ]]>   
    </fx:Script> 

    <!-- host component --> 
    <fx:Metadata> 
     <![CDATA[ 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("spark.components.Image")] 
     ]]> 
    </fx:Metadata> 

    <!--- Defines the appearance of the image background. --> 
    <s:Rect id="background" left="0" right="0" top="0" bottom="0"> 
     <s:fill> 
      <!-- @private --> 
      <s:SolidColor id="bgFill"/> 
     </s:fill> 
    </s:Rect> 

    <s:Group x="0" y="0"> 
     <s:filters> 
      <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="45" distance="10" /> 
      <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="90" distance="10"/> 
      <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-45" distance="10" /> 
      <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-90" distance="10"/> 
     </s:filters> 
     <s:mask> 
      <s:Group x="0" y="0" width="280" height="180" > 
       <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10"> 
        <s:fill> 
         <s:SolidColor color="#FFFFFF"/> 
        </s:fill> 
       </s:Rect> 
      </s:Group> 

     </s:mask> 

     <!--- Primary image display skin part. --> 
     <s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0"/> 

    </s:Group> 




    <!--- Progress indicator skin part. --> 
    <s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" /> 

    <!--- Icon that appears in place of the image when an invalid image is loaded. --> 
    <s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0"/> 

</s:Skin> 

應用此外觀類火花圖像

<s:Image source="@Embed('assets/maskImg.png')" skinClass="MaskedImageSkin" width="200" height="200"/> 

上面的代碼只是掩蓋圖像的例子，使用圓角矩形創建自己的面具。這將解決您的問題。

快樂剝皮......