Comunidad de diseño web y desarrollo en internet online

Clase para dibujar líneas segmentadas con ActionScript 3

Esta clase surgió básicamente por la necesidad, así es que retome un tip de Zguillez en el cual mostraba una "Clase para dibujar líneas de puntos en ActionScript 3", y la adapte para hacer lineas separadas en segmentos (similar al atributo dashed-border en CSS).


Ejemplo, y comparación de resultados con la clase de Zguillez (abajo)


Esta clase funciona de una manera muy similar al tip de Zguillez, por ello, al igual que en el tip recién citado daremos uso a la misma subclase llamada Circulo.as encargada de dibujar cada uno de los puntos concretamente.

Código :

package com.zguillez.display.graphics
{
   import flash.display.Sprite;
   import flash.display.Shape;
   import flash.display.Graphics;
   //------------------------------------------
   public class Circulo extends Sprite
   {
      private var _clip:Shape;
      private var _size:uint;
      private var _bgColor:uint;
      private var _borderSize:uint;
      private var _borderColor:uint;
      private var _bg:Boolean;
      //------------------------------------------
      public function Circulo(size=10,bgColor=0x000000,bg=true,borderSize=0,bordeColor=0x000000)
      {
         _size = size;
         _bg = bg;
         _bgColor = bgColor;
         _borderSize = borderSize;
         _borderColor = bordeColor;
         dibuja();
      }
      //------------------------------------------
      private function dibuja():void
      {
         _clip = new Shape();
         if (_bg==true) {
            _clip.graphics.beginFill(_bgColor);
         }
         if (_borderSize!=0) {
            _clip.graphics.lineStyle(_borderSize, _borderColor);
         }
         var radio:uint = Math.round(_size/2);
         _clip.graphics.drawCircle(radio, radio, radio);
         if (_bg==true) {
            _clip.graphics.endFill();
         }
         addChild(_clip);
      }
      //------------------------------------------
   }
}
Y bien, esta es la clase modificada llamada dashedLine.as, que se encargara de dibujar las lineas. El único rasgo interesante es que cada 10 pixeles la variable boolean "dashed" se encargara de borrar y dibujar alternadamente la linea, logrando así el efecto:

Código :

package mau.utils
{
   import com.zguillez.display.graphics.Circulo;
   import flash.display.Sprite;
   import flash.geom.Point;
   //
   public class dashedLine extends Sprite
   {
      private var size:uint;
      private var bgColor:uint;
      private var dashed:Boolean;
      private var distance:uint;
      private var line:Sprite;
      private var p1:Point;
      private var p2:Point;
      //
      public function dashedLine(_size:uint = 3, _bgColor:uint = 0x000000)
      {
         bgColor = _bgColor;
         size = _size < 3 ? 3 : _size;
         line = new Sprite();
         addChild(line);
      }
      //
      public function moveTo(x:int, y:int):void
      {
         p1 = new Point(x, y);
         line.x = p1.x;
         line.y = p1.y;
      }
      //
      public function lineTo(x:int, y:int):void
      {
         p2 = new Point(x, y);
         distance = Point.distance(p1, p2);
         drawLine();
      }
      //
      private function drawLine():void 
      {
         var space:Number = 0;
         //
         for (var i:uint = 0; i <= distance; i++)
         {
            space++;
            if(space > 10)
            {
               space = 0;
               dashed = dashed ? false : true;
            }
            //
            if(dashed)
            {
               var circulo:Circulo = new Circulo(size, bgColor);
               circulo.x = (p2.x - p1.x) / distance * i;
               circulo.y = (p2.y - p1.y) / distance * i;
               line.addChild(circulo);
            }          
         }
         //
         dashed = true;
      }
   }
}
Finalmente, aquí un ejemplo de su uso en el cual podemos agregar como parámetros el grosor de la linea y el color de la misma respectivamente, ambos opcionales por lo que no te dará problemas al personalizar los parametros:

Código :

import mau.utils.dashedLine;
//
var linea:dashedLine = new dashedLine(1);
linea.moveTo(10,20);
linea.lineTo(490,20);
addChild(linea);

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate