圆角TabNavigator:RoundTabNavigator

左侧为默认的TabNavigator，右侧为扩展后的RoundTabNavigator，两个均有相同的属性， borderStyle="solid" cornerRadius="10"，但是圆角呈现上TabNavigator左上角会连接不上：

在线例子
源代码： 纳米盘下载|download

RoundTabNavigator.as

package com.kelvinsworld

{

    import mx.containers.TabNavigator;

   

    [Style(name="borderAlpha", type="Number", inherit="no", defaultValue="1")]

 

    public class RoundTabNavigator extends TabNavigator

    {

       private var _showBorder:Boolean=true;

      

       public function RoundTabNavigator()

       {

           super();

       }

      

       [Inspectable(category="General", enumeration="true,false", defaultValue="true")]

       public function set showBorder(value:Boolean):void

       {

           this._showBorder=value;

       }

       public function get showBorder():Boolean

       {

           return this._showBorder;

       }

      

       override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void

       {

           super.updateDisplayList(unscaledWidth,unscaledHeight);

           this.drawOutline();

       }

      

       public function drawOutline():void

       {

           var cornerRadius:Number=this.getStyle("cornerRadius");

           if(cornerRadius>0)

           {

              this.setStyle("backgroundAlpha", 0);

              this.setStyle("borderStyle", "none");

             

              var borderColor:uint=this.getStyle("borderColor");

              var borderAlpha:Number=this.getStyle("borderAlpha");

              var backgroundColor:uint=this.getStyle("backgroundColor");

             

              graphics.clear();

              if(showBorder)

                  graphics.lineStyle(1,borderColor,borderAlpha,true); 

              graphics.beginFill(backgroundColor,1);

           graphics.drawRoundRectComplex(0,this.tabBar.height-2,this.width,this.height-this.tabBar.height+1,0,cornerRadius,cornerRadius,cornerRadius);

              graphics.endFill();

           }

       }

    }

}