Comunidad de diseño web y desarrollo en internet

Clase para dibujar líneas de puntos en ActionScript 3

Esta es una pequeña clase para dibujar lineas puntuadas con ActionScript 3. Su funcionamiento es muy sencillo, únicamente va dibujando puntos y los posiciona uno detrás del otro simulando la línea.

El resultado sería una linea como esta:



De entrada tendremos una clase Circulo.as que es la que nos dibujará un circulo concreto. Esa es una clase independiente para hacerla más reutilizable, ya que la podremos utilizar siempre que queramos dibujar círculos.

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);
      }
      //------------------------------------------
   }
}


Al constructor de la clase le pasamos el ancho del circulo, el color de fondo, y si lleva linea de borde con sus valores.

Ahora escribiremos una clase LineaPuntuada.as, que generará un Sprite en el que colocará los círculos formando la línea.

Código :

package com.zguillez.display
{
   import flash.display.Sprite;
   import flash.geom.Point;
   import com.zguillez.display.graphics.Circulo;
   //-----------------------------------------
   public class LineaPuntuada extends Sprite
   {
      private var _linea:Sprite;
      private var _size:uint;
      private var _space:uint;
      private var _bgColor:uint;
      private var _point1:Point;
      private var _point2:Point;
      private var _numCirculos:uint;
      //-----------------------------------------
      public function LineaPuntuada(size=3,space=9,bgColor=0x000000)
      {
         _linea = new Sprite();
         _size = size;
         _space = space;
         _bgColor = bgColor;
         addChild(_linea);
      }
      //-----------------------------------------
      public function moveTo(pX:int, pY:int):void
      {
         _point1 = new Point(pX, pY);
         _linea.x = _point1.x;
         _linea.y = _point1.y;
      }
      //-----------------------------------------
      public function lineTo(pX:int, pY:int):void
      {
         _point2 = new Point(pX, pY);
         _numCirculos = Point.distance(_point1, _point2) / _space;
         drawCirculos();
      }
      //-----------------------------------------
      private function drawCirculos():void 
      {
         for (var i:uint = 0; i <= _numCirculos; i++)
         {
            var circulo:Circulo = new Circulo(_size, _bgColor);
            circulo.x = (_point2.x - _point1.x) / _numCirculos * i;
            circulo.y = (_point2.y - _point1.y) / _numCirculos * i;
            _linea.addChild(circulo);            
         }
      }
      //-----------------------------------------
   }
}


En el constructor pasaremos los parámetros que queremos para la linea, como el grosos del punto, el color y el espaciado entre puntos.

Utilizaremos los métodos moveTo y lineTo para posicionar la línea sobre el lienzo.

Este sería el código para obtener una linea como la mostrada al inicio del tip.

Código :

import com.zguillez.display.LineaPuntuada;

var linea:LineaPuntuada = new LineaPuntuada(2,5);
linea.moveTo(10,10);
linea.lineTo(490,50);
addChild(linea);

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

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