Home » AS3 »Class » Currently Reading:

Clase para dibujar líneas de puntos en ActionScript 3

marzo 7, 2008 AS3, Class No Comments
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.

  1. package com.zguillez.display.graphics
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.display.Shape;
  5.     import flash.display.Graphics;
  6.     //------------------------------------------
  7.     public class Circulo extends Sprite
  8.     {
  9.         private var _clip:Shape;
  10.         private var _size:uint;
  11.         private var _bgColor:uint;
  12.         private var _borderSize:uint;
  13.         private var _borderColor:uint;
  14.         private var _bg:Boolean;
  15.         //------------------------------------------
  16.         public function Circulo(size=10,bgColor=0x000000,bg=true,borderSize=0,bordeColor=0x000000)
  17.         {
  18.             _size = size;
  19.             _bg = bg;
  20.             _bgColor = bgColor;
  21.             _borderSize = borderSize;
  22.             _borderColor = bordeColor;
  23.             dibuja();
  24.         }
  25.         //------------------------------------------
  26.         private function dibuja():void
  27.         {
  28.             _clip = new Shape();
  29.             if (_bg==true) {
  30.                 _clip.graphics.beginFill(_bgColor);
  31.             }
  32.             if (_borderSize!=0) {
  33.                 _clip.graphics.lineStyle(_borderSize, _borderColor);
  34.             }
  35.             var radio:uint = Math.round(_size/2);
  36.             _clip.graphics.drawCircle(radio, radio, radio);
  37.             if (_bg==true) {
  38.                 _clip.graphics.endFill();
  39.             }
  40.             addChild(_clip);
  41.         }
  42.         //------------------------------------------
  43.     }
  44. }

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.

  1. package com.zguillez.display
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.geom.Point;
  5.     import com.zguillez.display.graphics.Circulo;
  6.     //-----------------------------------------
  7.     public class LineaPuntuada extends Sprite
  8.     {
  9.         private var _linea:Sprite;
  10.         private var _size:uint;
  11.         private var _space:uint;
  12.         private var _bgColor:uint;
  13.         private var _point1:Point;
  14.         private var _point2:Point;
  15.         private var _numCirculos:uint;
  16.         //-----------------------------------------
  17.         public function LineaPuntuada(size=3,space=9,bgColor=0x000000)
  18.         {
  19.             _linea = new Sprite();
  20.             _size = size;
  21.             _space = space;
  22.             _bgColor = bgColor;
  23.             addChild(_linea);
  24.         }
  25.         //-----------------------------------------
  26.         public function moveTo(pX:int, pY:int):void
  27.         {
  28.             _point1 = new Point(pX, pY);
  29.             _linea.x = _point1.x;
  30.             _linea.y = _point1.y;
  31.         }
  32.         //-----------------------------------------
  33.         public function lineTo(pX:int, pY:int):void
  34.         {
  35.             _point2 = new Point(pX, pY);
  36.             _numCirculos = Point.distance(_point1, _point2) / _space;
  37.             drawCirculos();
  38.         }
  39.         //-----------------------------------------
  40.         private function drawCirculos():void
  41.         {
  42.             for (var i:uint = 0; i <= _numCirculos; i++)
  43.             {
  44.                 var circulo:Circulo = new Circulo(_size, _bgColor);
  45.                 circulo.x = (_point2.x - _point1.x) / _numCirculos * i;
  46.                 circulo.y = (_point2.y - _point1.y) / _numCirculos * i;
  47.                 _linea.addChild(circulo);              
  48.             }
  49.         }
  50.         //-----------------------------------------
  51.     }
  52. }&#91;/as]</div>
  53.  
  54. En el constructor pasaremos los parámetros que queremos para la linea, como el grosos del punto, el color y el espaciado entre puntos.
  55.  
  56. Utilizaremos los métodos moveTo y lineTo para posicionar la línea sobre el lienzo.
  57.  
  58. Este sería el código para obtener una linea como la mostrada al inicio del [url=http://www.cristalab.com/tips/]tip[/url].
  59.  
  60. <div id=codigo>[as]import com.zguillez.display.LineaPuntuada;
  61.  
  62. var linea:LineaPuntuada = new LineaPuntuada(2,5);
  63. linea.moveTo(10,10);
  64. linea.lineTo(490,50);
  65. addChild(linea);

Compártelo:

Clase para dibujar líneas de puntos en ActionScript 3

Post relacinonados:

  1. Clase para cargar contenido externo en Actionscript 3
  2. Clase de ActionScript 3 para añadir sombras a MovieClips
  3. Clase de ActionScript 3 para retardar la ejecución de funciones
  4. Comunicación entre clases Actionscript 3 con EventDispatcher
  5. Clase de Actionscript 3 para arrays multidimensionales

YARPP
Visto 9.691 veces

Comment on this Article:








Usuario registrado

Conectar con
Conectar con

Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com