¿Quieres registrarte?

Clase para dibujar líneas segmentadas con ActionScript 3

Por: M@U
10 de Abril del 2009
5083 de clabLevel
Otros artículos de M@U
4,155 visitas

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

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas matematicas actionscript_3

Comentarios | Enviar un comentario
Interesante forma de trabajar con la pendiente de una recta, muy buen tip :)
Lo que si no estoy muy deacuerdo es en dibujar(o agregar) punto por punto(Circulo extends Sprite), eso se prodría trabajar solo con el graphics.. creo
Por: asphyk

asphyk :

Lo que si no estoy muy deacuerdo es en dibujar(o agregar) punto por punto(Circulo extends Sprite), eso se prodría trabajar solo con el graphics.. creo
Yup! Yo se, de hecho a traves de graphics pueden ser agregadas todas las rectas sin problemas. Solamente me pareció cómodo emplear la subclase de la clase que tome de ejemplo.
Por: M@U

Código :

package view
{
   import flash.display.MovieClip;
   import flash.geom.Point;
   
   /**
    * ...
    * @author asphyk 
    */
   public class Param04 extends MovieClip
   {
      
      public function Param04() 
      {
         init();
      }

      private function init():void
      {
         drawLine(this, new Point(10, 20), new Point(490,20),10);
      }
      private function drawLine(cont:MovieClip, po:Point, pf:Point,espacio:Number):void
      {
         cont.graphics.lineStyle(0.5,0xFFFFFF,1);
         cont.graphics.moveTo(po.x,po.y);
         var pendiente:Number = ((pf.y - po.y)/(pf.x - po.x));
         var distancia:Number = Point.distance(po, pf);
         var nespacio:int = 0;
         var n1espacio:int = 0;
         var dibuja:Boolean = false;
         var ndibuja:Boolean = false;
         
         for (var i:uint = 0; i < distancia; i++) 
         {
            if (nespacio <= espacio)
            {
               dibuja = true;
               
            }else
            {
               dibuja = false;
               n1espacio++;
            }
            if (n1espacio > espacio)
            {
               ndibuja = true;
            }
            if (dibuja)
            {
               cont.graphics.lineTo( i+po.x, pendiente*(i) + po.y);
               //cont.graphics.lineTo( i+po.x, (i)*(i)*1/20 + po.y);
            }
            if(ndibuja)
            {
               ndibuja = false;
               nespacio = 0;
               n1espacio = 0;
               cont.graphics.moveTo(i+po.x, pendiente*(i) + po.y);
               //cont.graphics.moveTo(i+po.x,(i)*(i)*1/20 + po.y);
            }
            nespacio++;
         }
      }
   }
}



drawLine(this, new Point(10, 20), new Point(490,20),10);

drawLine(this, new Point(10, 20), new Point(490,150),5);

Por: asphyk
Hey, me agrada, pero tienes alguna idea de ¿por que los tramos son irregulares al cambiar las pendientes?
Por: M@U
Para lo que son rectas, el tramo es el mismo. Cuando son otro tipo de curvas ahy si varía...

cont.graphics.lineTo( i+po.x, (i)*(i)*1/20 + po.y);

Por: asphyk
Ambos grosos! creo que sería bueno crear algúna sección o algo por el estilo como "competencias (sanas)" como de la que surgen aca, es muy bueno ver como se puede superar/mejorar/dar-opciones de todo y más bueno aún ver que ninguno de los 2 se enfada con el otro o tira alguna indirecta como a veces suele suceder!
Por: Raxiro-blog
la abalancha
Por: yiney-blog
Se ve muy bien M@U
Por: Dano
M@u, tanto distance como i han de ser Numbers. Además (y va para todos) tenemos que "dibujar el último segmento".
como detalle podemos escribir

Código :


dashed=!dashed


Antes de algo tan "bizarro" como

Código :


dashed = dashed ? false : true;


Por: Eliseo2
Muy bueno ejemplo.

Saludos,

Silva Developer
silva.developer@gmail.com
Por: Silva Developer-blog
hola he copiado y pegado el codigo de
circulo.as , dashedLine y bueno el trozo de codigo que es este :

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


y bueno lo estoy llamando desde un archivo fla no se si estara bien pero
me sale el siguiente error :
1180: Llamada a un método addChild posiblemente no definido.
me podrian ayudar cual es el problema en realidad soy nuevo en este tema pero me interesa mucho , mi mail es sdarknot@gmail.com desde ya gracias
Por: sdarknot-blog
hola chicos la verda soy un principianre en actionscipt pero descarge el codigo anterior y me sale un erro que los paquete anidado, la verda no se como solucinar este problema y no manejo muy bien las funciones y clases en action, antemano les agrasco por la respuesta
Por: Thison
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.