Flex 4 - 如何繪製形狀以用作ButtonBarButton的外觀

Question

我正在使用Flash Builder 4並且正在學習過程中。

短期和簡單的解釋是，我想有標籤，看起來像這樣的標籤導航：

我知道我可以做到這一點使用基於圖像的皮膚，但我想通（並且可能是錯誤的）以編程方式繪製形狀在可伸縮性方面會更好。

只要我得到我期待的結果，我想我真的不在乎它是mx還是spark。我試着這樣做：

主要應用：

<mx:ButtonBar dataProvider="{vsTabNav}" firstButtonStyle="firstButtonStyle"/> 

CSS文件：

.firstButtonStyle { skinClass:ClassReference("assets.skins.ButtonBarFirstButtonSkin"); } 

ButtonBarFirstButtonSkin.as：

package assets.skins 
{ 
    import flash.display.Graphics; 
    import mx.skins.halo.ButtonBarButtonSkin; 
    import mx.graphics.RectangularDropShadow; 

    public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkin 
    { 
     private var dropShadow:RectangularDropShadow; 

     public function ButtonBarFirstButtonSkin() 
     { 
      super(); 
     } 

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      super.updateDisplayList(unscaledWidth, unscaledHeight); 

      var cornerRadius:Number = getStyle("cornerRadius"); 
      var backgroundColor:int = getStyle("backgroundColor"); 
      var backgroundAlpha:Number = getStyle("backgroundAlpha"); 
      graphics.clear(); 

      cornerRadius = 10; 
      backgroundColor = 0xFF0000; 
      backgroundAlpha = 1; 

      // Background 
      drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl:1, tr:cornerRadius, bl:1, br:1}, backgroundColor, backgroundAlpha); 

      // Shadow 
      if (!dropShadow) 
       dropShadow = new RectangularDropShadow(); 

      dropShadow.distance = 8; 
      dropShadow.angle = 45; 
      dropShadow.color = 0; 
      dropShadow.alpha = 0.4; 
      dropShadow.tlRadius = 1; 
      dropShadow.trRadius = cornerRadius; 
      dropShadow.blRadius = 1; 
      dropShadow.brRadius = 1; 
      dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); 
     } 

    } 
} 

這應該意味着第一個按鈕是紅色的，並且會有一個非常圓的右上角。相反，我只是得到默認按鈕。不知道我在那裏做錯了什麼，但如果這不是最好的解決方案，我會喜歡一些幫助。謝謝！

Answer 1

首先，看看http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

然後，你應該意識到，你會好起來的爲您創造ButtonBarButtons第一的皮膚，並確保您的按鈕欄使用它們作爲按鈕。

另外，您可以使用Path類創建形狀。以下是創建類似形狀的你一個例子：

<?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" minWidth="955" minHeight="600"> 
    <s:Path x="10" y="10" 
      data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0xFFFFFF" /> 
       <s:GradientEntry color="0xFDFDFD" ratio="0.6" /> 
       <s:GradientEntry color="0x8A8A8A" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 

    <s:Path x="215" y="10" 
      data="M 30 0 Q 10 0 0 20 H 200 Q 190 3 170 0 H 30 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0x8f8f8f" /> 
       <s:GradientEntry color="0x878787" ratio="0.6" /> 
       <s:GradientEntry color="0x5d5d5d" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 
</s:Application> 

UPDATE： 如果你想縮放，你可以把Path元素爲圖形元素，並設置其scaleGrid性質：

<s:Graphic scaleGridTop="1" scaleGridBottom="19" scaleGridLeft="10" scaleGridRight="170" 
      width="150" height="15" 
      x="10" y="10" 
      > 
    <s:Path 
      data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0xFFFFFF" /> 
       <s:GradientEntry color="0xFDFDFD" ratio="0.6" /> 
       <s:GradientEntry color="0x8A8A8A" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 
</s:Graphic> 

Answer 2

如果這就是你想要達到的目標 - 你不能只是指定CSS樣式中的角半徑值並繼續（沒有自定義皮膚）？

:)