Como se explica en flash concurso Actionscript: herramienta de borrar no se puede "borrar" un área en particular de un Sprite, MovieClip o la forma en que las líneas o rectángulos se dibuja con el cursor gráfico. Hay, de hecho, el único método clear() , sin embargo, no tiene efecto sobre toda la superficie del objeto. La solución a este problema radica en la posibilidad de utilizar el mapa de bits y objetos BitmapData. Como veremos más adelante podemos acceder directamente y manipular los datos de mapa de bits con el fin de "borrar" golpes con un instrumento real "borrador".
Muestran dos formas diferentes de lograr la "puerta". per esempio. El primer "draw" (borrar) los datos directamente en el BitmapData, usando el método fillRect() - también se puede utilizar setPixel() por ejemplo. El segundo método, la que yo prefiero, utiliza los métodos de las fusiones (blendMode).
En primer lugar vamos a ver qué tipo de organización es el mínimo necesario para lograr un pintor de Flash simple. El esquema que se presenta a continuación se aplica tanto a las propuestas de la "puerta":
He creado tres capas: la primera MovieClip o Sprite, los antecedentes y el trabajo del controlador de eventos (MouseDown, MouseMove y MouseUp). El segundo, el de mapa de bits es nuestro capas principales, una que realmente dibujado de gráficos se aplicarán y en el que la "puerta". , ecc…). La tercera y última capa, la forma, aborda dos cuestiones: la primera es que permite utilizar directamente las funciones proporcionadas por el cursor gráfico (como lineStyle , drawRect() , etc ...). También aumenta el rendimiento en el cuadro de seguimiento, 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" con el método fillRect() directamente en el BitmapData (capa 2) después de que el diseño ha sido copiado (usando el método draw() ) de forma (nivel 3) de mapa de bits (nivel 2).
Para entender cómo funciona aquí es la misma película con la capa descompuesta y pseudo-3D - dibujado en la caja de color - Fuente :
Como se puede ver que se basan en la capa 3, la forma. Al tomar el evento MouseUp del contenido se copia en la forma de mapa de bits (y por lo tanto, los datos están en BitmapData) y luego la forma es limpio ( clear() ).
Nota: este último punto, la clear() en la forma, no debe ser subestimada. Algunos ejemplos del pintor en Flash (casi todos carecen de una verdadera "puerta") dibujar directamente sobre un clip de película, o la forma, el mantenimiento de los datos de la última dibujada. Después de un tiempo "dibuja el sistema se ralentiza, como el área de" vector "de los aumentos de MovieClip. En el método presentado por mí este problema se resuelve en que el vector de datos de forma, cuando se copian en el mapa de bits son tasformati en bits y la forma se eliminará, liberando la memoria y volver al flujo de diseño!
Manteniendo pulsada la tecla Ctrl (Control) es "eliminado" directamente a través de la BitmapData fillRect() . Esto es posible porque fillRect() , al igual que otros métodos que actúan en BitmapData, le permiten establecer el "color" por 0xARGB, donde A es el valor de 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 de importación. MouseEvent ; . BitmapData ; flash.display importación. BitmapData ; . Bitmap ; flash.display importación. mapas de bits ; . GradientType ; . flash.display importación GradientType ; / / . Matrix ; importaciones 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 ; area_height var: Número .. = event_spr prácticas stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: cadena = GradientType . LINEAL; : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colores: array = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; var alphas: array = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; var ratios: 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 ) ; . createGradientBox matriz (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, las proporciones, la matriz, spreadMethod); 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height); ; endFill (); } / Evento / Pintura ( 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, 0 verdad.) Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); / / Forma temporal Shape = new Shape ( ) ; draw_shape var: Forma = new forma (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent ): void { ) ; depuración ("_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 (and. localX y localY.); md = true; } / / e : MouseEvent ) : void { _onMouseUp función (e: MouseEvent ): void { md = false; . draw ( draw_shape ) ; .. bmp bitmapData empate (draw_shape); . clear ( ) ; . draw_shape gráficos claros ().; } / / e : MouseEvent ) : void { _onMouseMove función (e: MouseEvent ): void { ) ; depuración ("_onMouseMove"); md && ! e . ctrlKey ) { if (md & &! y ctrlKey.) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX y localY.); ( md && e . ctrlKey ) { } Else if (md & & y. CtrlKey) { . fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; .. bmp bitmapData fillRect (nuevo rectángulo (objetivo and. mouseX - 10, y el objetivo mouseY - 10, 20, 20), 0...); } } / / v : String ) : void { depuración de la función (v: Cadena ): void { : Date = new Date ( ) ; var d: Fecha = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st); } |
La línea 61, como se muestra en el código anterior, por lo que cuando se ejecuta la tecla Control está presionado. Como se puede ver esta sección de código se basa directamente en el BitmapData con un color 0, 0 × 0000!
MÉTODO 2 - El uso de mezclas
Este es probablemente el mejor método a utilizar cuando se permite ningún tipo de "puerta". A diferencia del método anterior no acceden directamente al mapa de bits de datos actuales BitmapData, pero que se aprovechan de la mezcla (blendMode) y copiar el mapa de bits utilizando el método draw().
Versión en 3D - fuente :
. Exactamente de la misma manera que copia los datos de la forma de mapa de bits, la "puerta" es "al mismo tiempo", copiando 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 de importación. MouseEvent ; . BitmapData ; flash.display importación. BitmapData ; . Bitmap ; flash.display importación. mapas de bits ; . GradientType ; . flash.display importación GradientType ; / / . Matrix ; importaciones 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 ; area_height var: Número .. = event_spr prácticas stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: cadena = GradientType . LINEAL; : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colores: array = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; var alphas: array = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; var ratios: 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 ) ; . createGradientBox matriz (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, las proporciones, la matriz, spreadMethod); 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height); ; endFill (); } / Evento / Pintura ( 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, 0 verdad.) Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); / / Forma temporal Shape = new Shape ( ) ; draw_shape var: Forma = new forma (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent ): void { ) ; depuración ("_onMouseDown"); : uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (y 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 (and. localX y localY.); md = true; } / / e : MouseEvent ) : void { _onMouseUp función (e: MouseEvent ): void { md = false; . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; .. bmp bitmapData empate (draw_shape, null, null, (and. ctrlKey "borrar" o "normal")?); . clear ( ) ; . draw_shape gráficos claros ().; } / / e : MouseEvent ) : void { _onMouseMove función (e: MouseEvent ): void { ) ; depuración ("_onMouseMove"); md ) { if (md) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX y localY.); } } / / v : String ) : void { depuración de la función (v: Cadena ): void { : Date = new Date ( ) ; var d: Fecha = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st); } |
Este código no es muy diferente de la del año anterior. La diferencia real está en la fila 52! Esto determina el "modo de fusión" cuando se copia de la forma de mapa de bits cuando la llave de control que se pulsa se utiliza la mezcla erase .
Eso es todo! Volveremos tan pronto como el mapa de bits y las diferencias entre MovieClip, Sprite, forma y objetos de mapa de bits ... todo visual!
[...] Cómo guardar las imágenes en Flash CS3 Tags: ActionScript 3.0, mapa de bits, BitmapData, Flash CS3, GD, GD Biblioteca, Internet, PHP, Flash Guardar imagen, desarrollo, Flash CS3 TutorialsCon el uso de mapa de bits es lo mejor que inmediatamente se desea crear una pintura pequeña. Ya hemos visto cómo pintar un poco (véase Creación de una aplicación de pintura € ™ en Flash CS3 y pintor: simple aplicación de dibujo en Flash CS3 Pro) puede soportar un verdadero "borrador" - la función de borrado, gracias al uso la forma y la capa de mapa de bits en particular. Digamos que Flash (a diferencia de Flex) que no permite la codificación (por ejemplo, JPG o PNG) se guarda automáticamente las imágenes de mapa de bits. Sin embargo, usted puede conseguir alrededor de él mediante un script del lado del servidor y la capacidad de enviar datos en Flash POST. [...]
[...] Crear una pintura en Flash CS3 [...]
Es una excelente solución, adecuada incluso para las soluciones de Web innnumerevoli aplicación gráfica.
@ Juan: Gracias! Véase también el pintor: sencilla aplicación de dibujo en Flash Pro CS3