Flex中如何通过扩展RectangularBorder类创建虚线以及控制虚线间间隔的例子

By Minidxer | February 26, 2009

Flex本身并不支持虚线，当然也就不可能有控制虚线间间隔一说了，不过做Web应用的时候，UI部分虚线有时候用的还是比较多的。下面的代码演示了通过扩展RectangularBorder类，实现创建虚线以及控制虚线间间隔。



先创建一个DashBorder.as 文件

  1. package
  2. {
  3.   import mx.core.UIComponent;
  4.  
  5.   public class DashBorder extends UIComponent{
  6.     private var dashlen:Number = 5;
  7.     private var gaplen:Number = 5;
  8.   
  9.     public function DashBorder(){
  10.       super();
  11.     }
  12.  
  13.     override protected function updateDisplayList
  14.       (unscaledWidth:Number, unscaledHeight:Number):void{
  15.  
  16.       super.updateDisplayList(unscaledWidth, unscaledHeight);
  17.  
  18.       var borderThickness:int = getStyle("borderThickness");
  19.       var borderColor:int = getStyle("borderColor");
  20.  
  21.       graphics.clear();
  22.       graphics.lineStyle(borderThickness, borderColor, 1)
  23.  
  24.       if (getStyle("dashlen")) {
  25.            this.dashlen = getStyle("dashlen");
  26.       }
  27.       if (getStyle("gaplen")) {
  28.            this.gaplen = getStyle("gaplen");
  29.       }
  30.  
  31.       drawBorder(this.x, this.y, unscaledWidth, unscaledHeight,
  32.         this.dashlen, this.gaplen);
  33.     }
  34.  
  35.     public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number,
  36.       dashlen:Number, gaplen:Number): void {   
  37.       if((x1 != x2) || (y1 != y2)){
  38.         var incrlen:Number = dashlen + gaplen;
  39.     
  40.         var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  41.         var angle:Number = Math.atan((y2 - y1) / (x2 - x1));
  42.         var steps:uint = len / (dashlen + gaplen);
  43.     
  44.         var dashstepx:Number = dashlen * Math.cos(angle);
  45.         if (x2 < x1) dashstepx *= -1;
  46.     
  47.         var dashstepy:Number = dashlen * Math.sin(angle);
  48.     
  49.         var gapstepx:Number = gaplen * Math.cos(angle);
  50.         if (x2 < x1) gapstepx *= -1;
  51.     
  52.         var gapstepy:Number = gaplen * Math.sin(angle);
  53.         var stepcount:uint = 0;
  54.     
  55.         while ((stepcount++) < steps) {      
  56.  
  57.           var dashstartx:Number;
  58.           var dashstarty:Number;
  59.           var dashendx:Number;
  60.           var dashendy:Number;
  61.       
  62.           if(x1 == x2 && y1 != y2){
  63.             dashstartx = dashendx = x1;
  64.             if(y2 > y1){
  65.               dashstarty = y1 + ((stepcount-1) * (dashlen + gaplen));            
  66.               dashendy = dashstarty + dashlen;
  67.             }else{
  68.               dashstarty = y1 - ((stepcount-1) * (dashlen + gaplen));            
  69.               dashendy = dashstarty - dashlen;
  70.             }
  71.           }else if(y1 == y2 && x1 != x2){
  72.             dashstarty = dashendy = y1;
  73.             if(x2 > x1){
  74.               dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen));
  75.               dashendx = dashstartx + dashlen;
  76.             }else{
  77.               dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen));
  78.               dashendx = dashstartx - dashlen;
  79.             }
  80.           }
  81.           graphics.moveTo(dashstartx, dashstarty);
  82.           graphics.lineTo(dashendx, dashendy);
  83.         }
  84.       }
  85.     }
  86.   
  87.     private function drawBorder(x1:Number, y1:Number, width:Number, height:Number,
  88.       dashlen:Number, gaplen:Number) : void {
  89.       drawLine(x1, y1, x1 + width, y1, dashlen, gaplen);
  90.       drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, gaplen);
  91.       drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen);
  92.       drawLine(x1, y1 + height, x1, y1, dashlen, gaplen);
  93.     }  
  94.   }
  95. }

下面是例子代码DashBorderExample.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.   verticalGap="20">
  4.   <mx:Style>
  5.     DashBorder {
  6.       dashlen: 20;
  7.       gaplen: 20;
  8.     }  
  9.     .tightDashBorder {
  10.       dashlen: 2;
  11.       gaplen: 2;
  12.     }
  13.     .tightDashWideGapBorder {
  14.       dashlen: 2;
  15.       gaplen: 20;
  16.     }
  17.     .wideDashTightGapBorder {
  18.       dashlen: 20;
  19.       gaplen: 2;
  20.     }
  21.   </mx:Style>
  22.   <mx:HBox horizontalGap="30">
  23.     <mx:VBox borderSkin="DashBorder"
  24.       borderThickness="1" borderColor="0xFF0000"
  25.       width="200" height="200">
  26.     </mx:VBox>  
  27.     <mx:VBox borderSkin="DashBorder"
  28.       borderThickness="1" borderColor="0xFF0000"
  29.       width="200" height="200" styleName="tightDashBorder">
  30.     </mx:VBox>  
  31.   </mx:HBox>
  32.   <mx:HBox horizontalGap="30">
  33.     <mx:VBox borderSkin="DashBorder"
  34.       borderThickness="1" borderColor="0xFF0000"
  35.       width="200" height="200" styleName="tightDashWideGapBorder">
  36.     </mx:VBox>  
  37.     <mx:VBox borderSkin="DashBorder"
  38.       borderThickness="1" borderColor="0xFF0000"
  39.       width="200" height="200" styleName="wideDashTightGapBorder">
  40.     </mx:VBox>  
  41.   </mx:HBox>
  42. </mx:Application>

英文参考：http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=13286

Topics: Adobe其他 | No Comments » | Tags: , ,

Random Posts

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll