Como se indica en concurso de Flash ActionScript: herramienta de borrado no se puede "eliminar" un área en particular en un Sprite, MovieClip, o la forma de la que se han trazado las líneas o rectángulos con los gráficos de puntero. Hay, de hecho, el único método clear() que, sin embargo, no tiene ningún efecto en toda la zona de nuestro objeto. La solución para el problema radica en la capacidad de utilizar de mapa de bits y objetos BitmapData. Como veremos que podemos acceder directamente y manipular los datos de mapa de bits con el fin de "borrar" los rasgos de un instrumento real "borrador".
Presentará dos métodos diferentes para realizar el "borrador". per esempio. La primera "dibuja" los datos (delete) directamente en el BitmapData, el método fillRect() - también se puede utilizar setPixel() por ejemplo. El segundo método, el que yo prefiero, utiliza los métodos de las fusiones (blendMode).
En primer lugar vamos a ver lo que se necesita tipo de organización para lograr un pintor mínima sencilla en Flash. El esquema que se presenta a continuación se aplica tanto a las propuestas de la "goma"
He creado tres capas: la primera, MovieClip o Sprite, fondo y actúa como el controlador de eventos (MouseDown, MouseMove y MouseUp). El segundo, el mapa de bits es nuestra capa más superior, el que en realidad elaborado gráficos, y que se aplica a la "goma". , ecc…). La tercera y última capa, la forma, aborda dos cuestiones: la primera es que permite utilizar directamente las funciones previstas por los gráficos punteros (como lineStyle , drawRect() , etc ...). También aumenta el rendimiento mientras que el seguimiento gráfico, como se explica en detalle a continuación.
MÉTODO 1 - Acceso directo a los datos de mapa de bits
) dalla Shape (layer 3) alla Bitmap (layer 2). Esta "muestra" utiliza el método fillRect() directamente en BitmapData (capa 2) después de que el diseño ha sido copiado (con el método draw() ) de la Forma (Layer 3) Bitmap (capa 2).
Para entender cómo funciona aquí es la misma película con las capas separadas y en pseudo-3D - dibujado en el recuadro de color - fuente :
Como se puede ver, se dibuja en la capa 3, la forma. Al tomar el evento MouseUp el contenido de la Forma se copian en el mapa de bits (y por lo tanto los datos están presentes en la BitmapData) y luego la forma es limpio ( clear() ).
Nota: este último punto, la clear() en la forma, no se debe subestimar. Algunos ejemplos de la pintora en Flash (casi todos carecen de una verdadera "borrador") se basan directamente en un clip de película o forma, manteniendo este último en los datos extraídos. Después de un tiempo 'que dibuja el sistema se ralentiza, ya que la zona "vector" de los aumentos de MovieClip. En el método que presenté este problema se resuelve porque el vector de datos de la forma, como copiado en el mapa de bits, se tasformati en bits y la forma se elimina, liberando la memoria y la fluidez restituiendo al diseño!
Mientras mantiene pulsada la tecla Ctrl (control) se "suprime" directamente a través del BitmapData fillRect() . Esto es posible porque fillRect() , al igual que los otros métodos que actúan sobre BitmapData, permite establecer el "color" a través 0xARGB, donde A es el valor alfa, la transparencia.
El código es el siguiente - fuente :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | . MouseEvent ; flash.events importación. MouseEvent ; . BitmapData ; import flash.display. BitmapData ; . Bitmap ; importar flash.display. mapa de bits ; . GradientType ; import flash.display. GradientType ; / / . Matrix ; . importación flash.geom Matrix ; / / Boolean = false ; var md: Boolean = false; / / Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite (); event_spr ) ; addChild (event_spr); / / Number = event_spr . stage . stageWidth ; var area_width: Número .. = event_spr prácticas stageWidth; Number = event_spr . stage . stageHeight - 32 ; var area_height: Número .. = event_spr prácticas stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: Cadena = GradientType LINEAL;. : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; colores var: matriz = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; alfas var: matriz = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; proporciones var: matriz = [0, 128, 255]; String = SpreadMethod . PAD ; spreadMethod var: Cadena = SpreadMethod PAD;. : Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix (); createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matriz createGradientBox (area_width, area_height, 1, 0, 0); / / event_spr . graphics ) { con (event_spr. gráficos) { fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, colores, alfas, relaciones, matriz, SpreadMethod); 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height); ; endFill (); } / / Pintura evento ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; . event_spr addEventListener ( MouseEvent MOUSE_DOWN, _onMouseDown.); ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; . event_spr addEventListener ( MouseEvent MOUSE_MOVE, _onMouseMove.); ( MouseEvent . MOUSE_UP , _onMouseUp ) ; . event_spr addEventListener ( MouseEvent MOUSE_UP, _onMouseUp.); ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; . event_spr addEventListener ( MouseEvent MOUSE_OUT, _onMouseUp.); / / BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (ancho event_spr., event_spr altura, es cierto, 0.); Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); Forma / / Temporal Shape = new Shape ( ) ; var draw_shape: Shape = new Shape (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent ): void { ) ; debug ("_onMouseDown"); : uint = 0xffffff ; var c: uint = 0xffffff; . lineStyle ( 10 , c , 1 ) ; .. draw_shape gráficos lineStyle (10, c, 1); . moveTo ( e . localX , e . localY ) ; .. draw_shape gráficos moveTo (E. localX, y localY.); md = true; } / / e : MouseEvent ) : void { función _onMouseUp (e: MouseEvent ): void { md = false; . draw ( draw_shape ) ; .. bmp bitmapData empate (draw_shape); . clear ( ) ; draw_shape gráficos clear ()..; } / / e : MouseEvent ) : void { función _onMouseMove (e: MouseEvent ): void { ) ; debug ("_onMouseMove"); md && ! e . ctrlKey ) { if (&& md! e. ctrlKey) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (E. localX, y localY.); ( md && e . ctrlKey ) { } Else if (&& md e. CtrlKey) { . fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; .. bmp bitmapData fillRect (nuevo Rectangle (e. objetivos mouseX - 10, y las metas mouseY - 10, 20, 20), 0...); } } / / v : String ) : void { debug función (v: Cadena ): void { : Date = new Date ( ) ; var d: Date = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d getSeconds () + ":" + d getMilliseconds () + ":".. + v); } |
La línea 61, como se muestra en el código anterior, es esguita cuando se pulsa la tecla Ctrl. Como se puede ver esta sección del código se basa directamente en un BitmapData con el color 0 o 0 × 0000!
MÉTODO 2 - Uso de los modos de fusión
Este es probablemente el mejor método cuando se puede usar cualquier tipo de "borrador". A diferencia del método anterior no tiene acceso directo a los datos de mapa de bits presentes en BitmapData, pero tomar ventaja de los modos de fusión (blendMode) y la copia del mapa de bits utilizando el método draw().
Versión en 3D - fuente :
. Exactamente de la misma manera que nosotros copiamos los datos de la forma de mapa de bits, el "borrador" es "simultato" copiar los datos de la forma de mapa de bits, pero, esta vez, el establecimiento de la blendMode del método draw() para erase .
El código es el siguiente - fuente :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | . MouseEvent ; flash.events importación. MouseEvent ; . BitmapData ; import flash.display. BitmapData ; . Bitmap ; importar flash.display. mapa de bits ; . GradientType ; import flash.display. GradientType ; / / . Matrix ; . importación flash.geom Matrix ; / / Boolean = false ; var md: Boolean = false; / / Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite (); event_spr ) ; addChild (event_spr); / / Number = event_spr . stage . stageWidth ; var area_width: Número .. = event_spr prácticas stageWidth; Number = event_spr . stage . stageHeight - 32 ; var area_height: Número .. = event_spr prácticas stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: Cadena = GradientType LINEAL;. : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; colores var: matriz = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; alfas var: matriz = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; proporciones var: matriz = [0, 128, 255]; String = SpreadMethod . PAD ; spreadMethod var: Cadena = SpreadMethod PAD;. : Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix (); createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matriz createGradientBox (area_width, area_height, 1, 0, 0); / / event_spr . graphics ) { con (event_spr. gráficos) { fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, colores, alfas, relaciones, matriz, SpreadMethod); 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height); ; endFill (); } / / Pintura evento ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; . event_spr addEventListener ( MouseEvent MOUSE_DOWN, _onMouseDown.); ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; . event_spr addEventListener ( MouseEvent MOUSE_MOVE, _onMouseMove.); ( MouseEvent . MOUSE_UP , _onMouseUp ) ; . event_spr addEventListener ( MouseEvent MOUSE_UP, _onMouseUp.); ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; . event_spr addEventListener ( MouseEvent MOUSE_OUT, _onMouseUp.); / / BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (ancho event_spr., event_spr altura, es cierto, 0.); Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); Forma / / Temporal Shape = new Shape ( ) ; var draw_shape: Shape = new Shape (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent ): void { ) ; debug ("_onMouseDown"); : uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (!.? e ctrlKey 0xffffff: 0x000000); . lineStyle ( 10 , c , 1 ) ; .. draw_shape gráficos lineStyle (10, c, 1); . moveTo ( e . localX , e . localY ) ; .. draw_shape gráficos moveTo (E. localX, y localY.); md = true; } / / e : MouseEvent ) : void { función _onMouseUp (e: MouseEvent ): void { md = false; . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; .. bmp bitmapData empate (draw_shape, null, null, (por ctrlKey "erase": "normal")); . clear ( ) ; draw_shape gráficos clear ()..; } / / e : MouseEvent ) : void { función _onMouseMove (e: MouseEvent ): void { ) ; debug ("_onMouseMove"); md ) { if (md) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (E. localX, y localY.); } } / / v : String ) : void { debug función (v: Cadena ): void { : Date = new Date ( ) ; var d: Date = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d getSeconds () + ":" + d getMilliseconds () + ":".. + v); } |
Este código no es muy diferente de la anterior. La diferencia real está en la fila 52! Esto determina el "modo de fusión" cuando se copia de forma de mapa de bits, y cuando se pulsa la tecla de control se utiliza el modo de fusión a erase .
Eso es todo! Vamos a volver al mapa de bits tan pronto como sea posible y las diferencias entre MovieClip, Sprite, Shape y Bitmap ... todos los objetos visuales!
[...] ¿Cómo guardar imágenes en Flash CS3 Etiquetas: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Biblioteca, Internet, PHP, Save Flash Imagen, Desarrollo, Flash CS3 TutorialsCon el uso de mapa de bits está tan mejorado que se quiere de inmediato a crear una pequeña pintura. Ya hemos visto cómo hacer una pequeña pintura (véase Creación de un € ™ Aplicación de pintura en Flash CS3 y Painter: sencilla aplicación para dibujar en Flash CS3 Pro) puede soportar un verdadero "borrador" - la función de borrado, gracias a la utilización en particular la forma de la capa y de mapa de bits. Digamos que Flash (a diferencia de Flex) que no permite la codificación (como JPG o PNG), se guardará automáticamente las imágenes de mapa de bits. Sin embargo, usted puede conseguir alrededor de él mediante el uso de secuencias de comandos del lado del servidor y la capacidad de flash para enviar datos en POST. [...]
[...] Crear una aplicación en Flash CS3 pintura [...]
Excelente solución adecuada para soluciones innnumerevoli relacionados con la aplicación web también gráfico.
@ Gianni: ¡gracias! Ver también pintor: sencilla aplicación para dibujo en Flash CS3 Pro