Comunidad de diseño web y desarrollo en internet online

Clase de Actionscript 3 para dibujar sobre cualquier Sprite

Esta es una simple clase que permite convertir cualquier sprite y/o MovieClip en un pizarron para dibujar, teniendo la posibilidad de cambiar estilo de pintado, borrado de la pizarra asi como activar o desactivar el modo de pintado. Para entender la clase mira los comentarios en el código.

Código :

package 
{
   import flash.display.DisplayObject;
   import flash.display.MovieClip;
   import flash.display.Sprite;
   import flash.events.MouseEvent;
   
   /**
    * @version 1.0
    * @author Zandy Bierhoff
    */
   public class TPainter  
   {
      // Modos de pintado...
      public static const PAINT:uint = 1;            // Modo de pintado.
      public static const NONE:uint = 0;            // No hace nada.
      
      private var __target:Sprite;               // Instancia del objeto que se va a convertir en pizarra.
      private var __paintMode:uint = TPainter.NONE;   // Por defecto no pinta
      private var __thickness:Number = 5;            // 5 de grosor por defecto.
      private var __colorLine:uint = 0xFF0000;       // rojo por defecto.
      private var __alpha:Number = 1;               // Alpha de linea de pintado.
      private var __actualCanvas:Sprite;            // Objeto pizarra donde realmente se pinta.
      
      /**
       * Constructor.
       * @param   target Objeto que se convertira en pizarra.
       * @param   mode Modo de pintado que se quiere inicilizar.
       */
      public function TPainter( target:Sprite, mode:uint ):void
      {
         this.__target = target;
         this._paintMode = mode;
      }
      
      /**
       * Se invoca cuando se presiona el click sobre el target.
       * @param   event Obj MouseEvent lanzado por _target
       */
      private function onTargetMouseDown(event:MouseEvent):void 
      {
         this.__actualCanvas = new Sprite();
         this.__target.addChild( __actualCanvas );   // Agrego 
         
         __actualCanvas.graphics.moveTo(__actualCanvas.mouseX, __actualCanvas.mouseY);
         __target.addEventListener(MouseEvent.MOUSE_MOVE, onTargetMouseMove);
         __target.addEventListener(MouseEvent.MOUSE_UP, onTargetMouseUp);
      }
      
      /**
       * Se invoca mientras el usuario tiene el click presionado
       * @param   event Objeto MouseEvent lanzado por _target
       */
      private function onTargetMouseMove(event:MouseEvent):void 
      {
         if( this.__paintMode == TPainter.PAINT ) {
            __actualCanvas.graphics.lineStyle(this.__thickness, this.__colorLine, this.__alpha);
         }
               
         __actualCanvas.graphics.lineTo(__actualCanvas.mouseX, __actualCanvas.mouseY);
         event.updateAfterEvent();// Making a smoother transaction of lines
      }
      
      /**
       * Se invoca cuando se levanta el mouse... [dejar de pintar o borrar]
       * @param   event Objeto MouseEvent lanzado por _target
       */
      private function onTargetMouseUp(event:MouseEvent):void {
         this.__target.removeEventListener(MouseEvent.MOUSE_MOVE, onTargetMouseMove);
      }
      
      /** Borra la pizarra completa **/
      public function _clean():void
      {
         __actualCanvas.graphics.clear();
      }
      
      
      /** Propiedades  **/
      public function get _paintMode():uint 
      { 
         return __paintMode; 
      }
      
      public function set _paintMode(value:uint):void 
      {
         if ( value != TPainter.NONE ) this.__target.addEventListener(MouseEvent.MOUSE_DOWN, onTargetMouseDown);
         else this.__target.removeEventListener(MouseEvent.MOUSE_DOWN, onTargetMouseDown);
   
         __paintMode = value;
      }
      
      
      public function get _thickness():Number { return __thickness; }
      
      public function set _thickness(value:Number):void 
      {
         __thickness = value;
      }
      
      public function get _colorLine():uint { return __colorLine; }
      
      public function set _colorLine(value:uint):void 
      {
         __colorLine = value;
      }
      
      public function get _alpha():Number { return __alpha; }
      
      public function set _alpha(value:Number):void 
      {
         __alpha = value;
      }
   }
}

Y para usarla

Código :

var pizarra:TPainter = new TPainter( my_sprite, TPainter.PAINT );

Por defecto el trazo es color rojo con ancho 5, para hacer cambios setear las propiedades _thickness( grosor de la linea ), _colorLine( color de linea ), _alpha ( opacidad del pintado ).

Espero les sea de utilidad :-)

¿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

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