1 Reply Latest reply on Nov 26, 2009 5:03 AM by BailHope

    Custom dashed border

    BailHope

      Hello everyone.

       

      For a custom project I've created a PhotoViewer, that simply shows images and fades them in and out along with a title and some text. I wanted to create a dashed border to put around these images and created my own implementation of a UIComponent. I found a fantastic example here:

      http://cookbooks.adobe.com/post_Creating_a_dashed_line_custom_border_with_dash_and-13286.h tml

      I modified it a bit, as I only wanted the border to be on top and bottom sides.

      (see at the bottom of this post for source code)

       

       

      The problem first shows itself when I put the variables "dashLen" and "dashGap" to 1. I only want the dashes to be one pixel wide and one pixel apart from each other. The border at the top of the images shows up exactly as I expected. The border at the bottom does not. The dashes seem 'fatter' somehow, almost as if a couple of lines are drawn right on each other. I want the bottom border to be exactly the same as the top border, of course.

       

      The code for drawing these lines seems to be exactly the same, so I don't know what's causing this problem.

       

      Can any of you give me a hand?

       

      Thanks in advance

       

       

       

      Full source code is here:

       

      <mx:Canvas>

          <mx:Dissolve alphaFrom="1" alphaTo="0" id="fadeOut" duration="1000" targets="{[imageToShow, title, text]}"  />
          <mx:Dissolve alphaFrom="0" alphaTo="1" id="fadeIn" duration="1000" targets="{[imageToShow, title, text]}" />
         
          <mx:HBox borderSkin="photoViewer.Dashborder" styleName="tightDashBorder" paddingTop="1" paddingBottom="1" borderColor="#6666CC" borderThickness="1" id="container" width="95%">
              <mx:VBox verticalAlign="middle" verticalGap="0" height="90%" width="255">
                  <mx:TextArea color="#6666CC" paddingTop="35" height="20%" width="255" id="title"/>
                  <mx:TextArea color="#333333" height="80%" width="255" id="text"/>
              </mx:VBox>
              <mx:Image width="510" height="299" id="imageToShow" maintainAspectRatio="true" />
          </mx:HBox>

      </mx:Canvas>

       

       

      The dashBorder class:

       

          import flash.display.LineScaleMode;   
          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");

       

            graphics.clear();

            graphics.lineStyle(borderThickness, borderColor, 1, false, LineScaleMode.NONE)

       

            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 {
            drawLine(x1, y1, x1 + width, y1, dashlen, gaplen); //top border
            drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen); //bottom border
          }
        }