圆角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")]

 

   publicclass RoundTabNavigatorextends TabNavigator

   {

      privatevar _showBorder:Boolean=true;

      

      publicfunction RoundTabNavigator()

      {

          super();

      }

      

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

      publicfunctionset showBorder(value:Boolean):void

      {

          this._showBorder=value;

      }

      publicfunctionget showBorder():Boolean

      {

          returnthis._showBorder;

      }

      

      overrideprotectedfunction updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void

      {

          super.updateDisplayList(unscaledWidth,unscaledHeight);

          this.drawOutline();

      }

      

      publicfunction 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();

          }

      }

   }

}