flex中的虚线框(dotted or dashed border for flex)

DashBorder class

package
{
  import mx.core.UIComponent;
  
  public class DashBorder extends UIComponent{
    private var dashlen:Number = 5;
    private var gaplen:Number = 5;
    
    public function DashBorder(){
      super();
    }

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

      super.updateDisplayList(unscaledWidth, unscaledHeight);

      var borderThickness:int = getStyle("borderThickness");
      var borderColor:int = getStyle("borderColor");
      var backgroundColor:int = getStyle("backgroundColor");
      var backgroundAlpha:Number = getStyle("backgroundAlpha");

      graphics.clear();

      graphics.beginFill(backgroundColor, backgroundAlpha);
      graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

      graphics.lineStyle(borderThickness, borderColor, 1)

      if (getStyle("dashlen")) {
           this.dashlen = getStyle("dashlen");
      }
      if (getStyle("gaplen")) {
           this.gaplen = getStyle("gaplen");
      }

      drawBorder(this.x, this.y, unscaledWidth, unscaledHeight,
        this.dashlen, this.gaplen); 
    }

    public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number,
      dashlen:Number, gaplen:Number): void {     
      if((x1 != x2) || (y1 != y2)){
        var incrlen:Number = dashlen + gaplen;
      
        var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
        var angle:Number = Math.atan((y2 - y1) / (x2 - x1));
        var steps:uint = len / (dashlen + gaplen);
      
        var dashstepx:Number = dashlen * Math.cos(angle);
        if (x2 < x1) dashstepx *= -1;
      
        var dashstepy:Number = dashlen * Math.sin(angle);
      
        var gapstepx:Number = gaplen * Math.cos(angle);
        if (x2 < x1) gapstepx *= -1;
      
        var gapstepy:Number = gaplen * Math.sin(angle);
        var stepcount:uint = 0;
      
        while ((stepcount++) < steps) {        

          var dashstartx:Number;
          var dashstarty:Number;
          var dashendx:Number;
          var dashendy:Number;
        
          if(x1 == x2 && y1 != y2){
            dashstartx = dashendx = x1;
            if(y2 > y1){
              dashstarty = y1 + ((stepcount-1) * (dashlen + gaplen));              
              dashendy = dashstarty + dashlen;
            }else{
              dashstarty = y1 - ((stepcount-1) * (dashlen + gaplen));              
              dashendy = dashstarty - dashlen;
            }
          }else if(y1 == y2 && x1 != x2){
            dashstarty = dashendy = y1;
            if(x2 > x1){
              dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx + dashlen;
            }else{
              dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx - dashlen;
            }
          }
          graphics.moveTo(dashstartx, dashstarty);
          graphics.lineTo(dashendx, dashendy);
        }
      }
    }
    
    private function drawBorder(x1:Number, y1:Number, width:Number, height:Number,
      dashlen:Number, gaplen:Number) : void {
		var borderSides:String = getStyle("borderSides");			
		if (borderSides != "left top right bottom")
		{
			// Adjust metrics based on which sides we have				
			if (borderSides.indexOf("left") != -1){
				drawLine(x1, y1 + height, x1, y1, dashlen, gaplen);
			}
			if (borderSides.indexOf("top") != -1){
				drawLine(x1, y1, x1 + width, y1, dashlen, gaplen);
			}
			if (borderSides.indexOf("right") != -1){
				drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, gaplen);
			}
			if (borderSides.indexOf("bottom") != -1){
				drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen);
			}
		}     
    }    
  }
}

Usage example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  verticalGap="20" backgroundGradientColors="0xFFFFFF, 0xFFFFFF"
  backgroundColor="0xFFFFFF" viewSourceURL="srcview/index.html">
  <mx:Script>
    <![CDATA[
      [Bindable] private var numValid:uint = 0;
      
      private function applyStyles():void{
        nv.validate(dash.text);
        nv.validate(gap.text);
        nv.validate(thickness.text);
        if(numValid == 3){
          var myBorderStyle:CSSStyleDeclaration = 
            new CSSStyleDeclaration('myBorderStyle');
          myBorderStyle.setStyle('dashlen', Number(dash.text));          
          myBorderStyle.setStyle('gaplen', Number(gap.text));          
          myBorderStyle.setStyle('borderThickness', Number(thickness.text));
          StyleManager.setStyleDeclaration("DashBorder", myBorderStyle, true);
        }
        numValid = 0;          
      }
    ]]>
  </mx:Script>
  <mx:NumberValidator id="nv" allowNegative="false" domain="real" valid="numValid++;" 
    invalid="mx.controls.Alert.show('ERROR: dash length, gap length, and border thickness must be (positive) numbers.');"/> 
  <mx:Form label="Choose Dashed Border Properties">
    <mx:FormItem label="Dash Length">
      <mx:TextInput id="dash" width="100" text="5"/>
    </mx:FormItem>
    <mx:FormItem label="Gap Length">
      <mx:TextInput id="gap" width="100" text="5"/>
    </mx:FormItem>
    <mx:FormItem label="Border Thickness">
      <mx:TextInput id="thickness" width="100" text="1"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button id="apply" label="Apply Styles"
        click="applyStyles()"/>
    </mx:FormItem>
  </mx:Form>
  <mx:VBox id="vb" borderSkin="DashBorder" width="250" height="20" 
    borderColor="0xFF0000"
    backgroundColor="0xFFFFFF" borderSides="bottom"
    horizontalAlign="center" verticalAlign="middle">
  </mx:VBox>
	
	<mx:VBox borderStyle="solid" borderSides="bottom" width="250" height="20"/>
</mx:Application>