Conforme explicado no concurso do Flash Actionscript: ferramenta de apagar você não pode "apagar" uma determinada área de um Sprite, MovieClip, ou de forma em que as linhas ou retângulos foram desenhados usando o cursor gráfico. Há, de fato, o único método clear() , no entanto, não tem efeito sobre toda a área do objeto. A solução para este problema reside na possibilidade de usar o Bitmap e objetos BitmapData. Como veremos nós podemos diretamente acessar e manipular dados de bitmap, a fim de "apagar" golpes com um verdadeiro instrumento de "borracha".
Apresentamos dois métodos diferentes para alcançar o "gate". per esempio. O primeiro "desenhar" (excluir) os dados diretamente para o BitmapData utilizando o método fillRect() - também pode ser usado setPixel() por exemplo. O segundo método, o que eu preferir, usa os métodos de fusões (blendMode).
Primeiro de tudo vamos ver que tipo de organização é minimamente necessário para atingir um Pintor do Flash simples. O esquema apresentado a seguir aplica-se tanto as propostas do "gate":

Eu criei três camadas: a primeira, MovieClip ou Sprite, de fundo e trabalho do manipulador de eventos (MouseDown, MouseMove e MouseUp). O segundo, o Bitmap é o nosso camadas principais, uma que realmente gráficos desenhados serão aplicadas e em que o "gate". , ecc…). A camada de terceira e última, a forma, aborda duas questões: a primeira é que ele permite usar diretamente as funções fornecidas pelo cursor gráfico (como lineStyle , drawRect() , etc ...). Também aumenta o desempenho durante o gráfico de monitoramento, conforme explicado em detalhes abaixo.
MÉTODO 1 - acesso direto aos dados bitmap
) dalla Shape (layer 3) alla Bitmap (layer 2). Esta "amostra" usando o método fillRect() diretamente no BitmapData (camada 2) após o projeto foi copiado (usando o método draw() ) de Shape (camada 3) para Bitmap (camada 2).
Para entender como ele funciona aqui é o mesmo filme com a camada de decomposição e pseudo-3D - desenhado em caixa colorida - Fonte :
Como você pode ver você desenhar na camada 3, o Shape. Ao levar o evento MouseUp do conteúdo é copiado para o Formato Bitmap (e, portanto, os dados estão em BitmapData) e depois a forma é limpa ( clear() ).
Nota: este último ponto, o clear() na forma, não deve ser subestimada. Alguns exemplos do pintor em Flash (quase todos falta um "gate" true) desenhar diretamente em um MovieClip, ou de forma, mantendo os dados sobre o último desenhado. Depois de um tempo 'você desenhar o sistema fica mais lento, como a área de "vetor" dos aumentos de MovieClip. No método apresentado por mim este problema é resolvido na medida em que o vetor de dados de forma, quando eles são copiados para o bitmap são tasformati em bits ea forma serão eliminados, liberando memória e devolvê-lo ao fluxo de design!
Mantendo pressionada a tecla Ctrl (controle) é "excluída" diretamente através do BitmapData fillRect() . Isto é possível porque fillRect() , como outros métodos que atuam sobre BitmapData, permitem que você defina a "cor" por 0xARGB, onde A é o valor de alfa, a transparência.
O código é o seguinte - Fonte :
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 importação. MouseEvent ; . BitmapData ; flash.display importação. BitmapData ; . Bitmap ; flash.display importação. Bitmaps ; . GradientType ; . flash.display importação GradientType ; / / . Matrix ; importações flash.geom. Matrix ; / / Boolean = false ; md var: 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 estágios stageWidth;.. Number = event_spr . stage . stageHeight - 32 ; area_height var: Número .. = event_spr estágios stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: string = GradientType . LINEAR; : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var cores: matriz = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; var alphas: Matriz = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; relações var: Matriz = [0, 128, 255]; String = SpreadMethod . PAD ; spreadMethod var: string = SpreadMethod PAD;. : Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix (); createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matrix createGradientBox (area_width, area_height, 1, 0, 0); / / event_spr . graphics ) { com (event_spr. gráficos) { fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, cores, alphas, relações, 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 (event_spr. largura, altura event_spr, true, 0.); Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); / Forma / Temporary Shape = new Shape ( ) ; draw_shape var: Forma = new Forma (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { função _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 (and. localX e localY.); md = true; } / / e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent ): void { md = false; . draw ( draw_shape ) ; .. bmp bitmapData draw (draw_shape); . clear ( ) ; . draw_shape gráficos clear ().; } / / e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent ): void { ) ; debug ("_onMouseMove"); md && ! e . ctrlKey ) { if (md & &! e. ctrlKey) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX e 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 (novo Rectangle (alvo and. mouseX - 10, e alvo mouseY - 10, 20, 20), 0...); } } / / v : String ) : void { debug function (v: string ): void { : Date = new Date ( ) ; var d: Date = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st); } |
Linha 61, como mostrado no código acima, funciona assim, quando a tecla Control está pressionado. Como você pode ver esta seção do código desenha diretamente no BitmapData com uma cor 0, 0 × 0000!
MÉTODO 2 - Uso de Blends
Este é provavelmente o melhor método a ser usado quando se permite qualquer tipo de "gate". Ao contrário do método anterior não acessar diretamente os dados presentes bitmap BitmapData, mas tirar proveito de mistura (blendMode) e copiar o bitmap usando o método draw().
3D versão - fonte :
. No exatamente da mesma maneira que copiar os dados da forma Bitmap, o "gate" é "simultaneamente", copiando os dados da Forma Bitmap, mas desta vez, definindo o blendMode o método draw() para erase .
O código é o seguinte - Fonte :
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 importação. MouseEvent ; . BitmapData ; flash.display importação. BitmapData ; . Bitmap ; flash.display importação. Bitmaps ; . GradientType ; . flash.display importação GradientType ; / / . Matrix ; importações flash.geom. Matrix ; / / Boolean = false ; md var: 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 estágios stageWidth;.. Number = event_spr . stage . stageHeight - 32 ; area_height var: Número .. = event_spr estágios stageHeight - 32; / / String = GradientType . LINEAR ; fillType var: string = GradientType . LINEAR; : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var cores: matriz = [0xFF0000, 0x00FF00, 0x0000FF]; : Array = [ 1 , 1 , 1 ] ; var alphas: Matriz = [1, 1, 1]; : Array = [ 0 , 128 , 255 ] ; relações var: Matriz = [0, 128, 255]; String = SpreadMethod . PAD ; spreadMethod var: string = SpreadMethod PAD;. : Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix (); createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matrix createGradientBox (area_width, area_height, 1, 0, 0); / / event_spr . graphics ) { com (event_spr. gráficos) { fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, cores, alphas, relações, 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 (event_spr. largura, altura event_spr, true, 0.); Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd); bmp ) ; addChild (bmp); / Forma / Temporary Shape = new Shape ( ) ; draw_shape var: Forma = new Forma (); draw_shape ) ; addChild (draw_shape); / / e : MouseEvent ) : void { função _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 (and. localX e localY.); md = true; } / / e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent ): void { md = false; . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; .. bmp bitmapData draw (draw_shape, null, null, (and. ctrlKey "apagar" ou "normal")?); . clear ( ) ; . draw_shape gráficos clear ().; } / / e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent ): void { ) ; debug ("_onMouseMove"); md ) { if (md) { . lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX e localY.); } } / / v : String ) : void { debug function (v: string ): void { : Date = new Date ( ) ; var d: Date = new Date (); d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st); } |
Este código não é muito diferente do ano anterior. A verdadeira diferença está na linha 52! Isso determina o "modo de mistura" ao copiar do Bitmap forma quando a tecla Control está pressionado é usado a mistura erase .
Isso é tudo! Voltaremos logo que o bitmap e as diferenças entre MovieClip, Sprite, Shape e objetos Bitmap ... tudo visual!










[...] Como salvar imagens em Tags Flash CS3: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Library, Internet, PHP, Flash Salvar Imagem, Desenvolvimento Flash CS3 TutorialsCon o uso de Bitmap é tão melhor que é imediatamente deseja criar uma pintura de pequeno porte. Já vimos como pintar um pouco (veja Criando uma pintura € ™ aplicação em Flash CS3 e Painter: aplicação simples para desenho em Flash CS3 Pro) pode suportar um "eliminador" verdadeira - função de apagar, graças ao uso forma e determinada camada Bitmap. Vamos dizer que o Flash (em oposição a Flex) não permite a codificação (como JPG ou PNG) ele automaticamente salva as imagens Bitmap. No entanto, você pode contorná-la usando um script do lado do servidor ea capacidade de enviar dados em Flash POST. [...]
[...] Criar um Paint no Flash CS3 [...]
Excelente solução, adequado até para as soluções de Web innnumerevoli aplicativo gráfico.
@ John: Obrigado! Veja também Pintor: simples aplicação de desenho no Flash Pro CS3