FLEX 3.0 虚线边框

本文共两个文件：DashBorderExample.mxml 和 DashBorder.as

1、DashBorderExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
    <mx:VBox x="50" y="50" width="200" height="200" borderThickness="1" borderColor="#00FF00" borderSkin="DashBorder"/>
    <mx:Panel x="300" y="50" width="200" height="200" borderThickness="5" borderColor="#FF00FF" borderSkin="DashBorder"/>
    <mx:Canvas x="550" y="50" width="200" height="200" borderThickness="1" borderColor="#FF0000" borderSkin="DashBorder"/>
    <mx:VBox x="800" y="50" width="200" height="200" borderThickness="5" borderColor="#00FFFF" borderSkin="DashBorder"/>
   
</mx:Application>

2、DashBorder.as

package{
import mx.core.UIComponent;

public class DashBorder extends UIComponent{
     private var dashlen:Number = 5;    //单点长度
     private var gaplen:Number = 55;    //两点间隔
    
     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");
         graphics.clear();
         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);
     }
   
     private function drawBorder(x1:Number, y1:Number, width:Number, height:Number, dashlen:Number, gaplen:Number):void{
         drawLine(x1, y1, x1 + width, y1, dashlen, gaplen);
         drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, gaplen);
         drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen);
         drawLine(x1, y1 + height, x1, y1, dashlen, 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);
          }
      }
     }
    
   }
}