Painting Flash CS3: real time erase tool

lunedì 11 febbraio, 2008

Partendo dai codici forniti in Creare un'applicazione Paint in Flash CS3, ed eseguendo piccole modifiche, si può migliorare notevolmente lo strumento di "erase". Aggiungendo una Shape non visibile, è possibile usarla come "piano" per eseguire il draw() in modalità di fusione "erase". Come mostrato nell'esempio qui sotto, dopo aver disegnato qualcosa, tenete premuto il tasto Ctrl e l'effetto di "cancellazione" appare ora in tempo reale.

Loading Flash Player...

Il codice è il seguente - sorgente:

Actionscript:
  1. import flash.events.MouseEvent;
  2. import flash.display.BitmapData;
  3. import flash.display.Bitmap;
  4. import flash.display.GradientType;
  5. //
  6. import flash.geom.Matrix;
  7. //
  8. var md:Boolean = false;
  9. //
  10. var event_spr:Sprite = new Sprite();
  11. addChild (event_spr);
  12. //
  13. var area_width:Number = event_spr.stage.stageWidth;
  14. var area_height:Number = event_spr.stage.stageHeight-32;
  15. //
  16. var fillType:String = GradientType.LINEAR;
  17. var colors:Array = [0xFF0000, 0x00FF00, 0x0000ff];
  18. var alphas:Array = [1, 1, 1];
  19. var ratios:Array = [0, 128, 255];
  20. var spreadMethod:String = SpreadMethod.PAD;
  21. var matrix:Matrix = new Matrix();
  22. matrix.createGradientBox (area_width, area_height, 1, 0, 0);
  23. //
  24. with (event_spr.graphics) {
  25.     beginGradientFill (fillType,colors,alphas,ratios,matrix,spreadMethod);
  26.     drawRect (0,0,area_width, area_height);
  27.     endFill ();
  28. }
  29. // paint event
  30. event_spr.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown);
  31. event_spr.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove);
  32. event_spr.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp);
  33. event_spr.addEventListener (MouseEvent.MOUSE_OUT, _onMouseUp);
  34. //
  35. var bmpd:BitmapData = new BitmapData(event_spr.width,event_spr.height,true,0);
  36. var bmp:Bitmap = new Bitmap(bmpd);
  37. addChild (bmp);
  38. //
  39. // shape temporanea
  40. var draw_shape:Shape = new Shape();
  41. addChild (draw_shape);
  42. //
  43. // shape, non visibile, usata per la "cancellazione"
  44. var erase_shape:Shape = new Shape();
  45.  
  46. //
  47. function _onMouseDown (e:MouseEvent):void {
  48.     debug ("_onMouseDown");
  49.     draw_shape.graphics.lineStyle (10, 0xffffff, 1);
  50.     erase_shape.graphics.lineStyle (20, 0xffffff, 1);
  51.     draw_shape.graphics.moveTo (e.localX,e.localY);
  52.     erase_shape.graphics.moveTo (e.localX,e.localY);
  53.     md = true;
  54. }
  55. //
  56. function _onMouseUp (e:MouseEvent):void {
  57.     md = false;
  58.     bmp.bitmapData.draw (draw_shape);
  59.     draw_shape.graphics.clear ();
  60.     erase_shape.graphics.clear ();
  61. }
  62. //
  63. function _onMouseMove (e:MouseEvent):void {
  64.     debug ("_onMouseMove");
  65.     if (md && !e.ctrlKey) {
  66.         draw_shape.graphics.lineTo (e.localX,e.localY);
  67.     } else if (md && e.ctrlKey) {
  68.         erase_shape.graphics.lineTo (e.localX,e.localY);
  69.         bmp.bitmapData.draw (erase_shape,null,null,"erase");
  70.     }
  71. }
  72. //
  73. function debug (v:String):void {
  74.     var d:Date = new Date();
  75.     trace (d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+": "+v);
  76. }

È stata aggiunta una nuova Shape, erase_shape, non visibile (non è stato effettuato nessun addChild()):

Actionscript:
  1. ...
  2. // shape, non visibile, usata per la "cancellazione"
  3. var erase_shape:Shape = new Shape();

Nella parte di codice che si preoccupa di disegnare è stato introdotto il controllo per il tasto Ctrl e, se premuto, viene interessata proprio la Shape erase_shape e copiata sulla Bitmap:

Actionscript:
  1. ....
  2. erase_shape.graphics.lineTo (e.localX,e.localY);
  3. bmp.bitmapData.draw (erase_shape,null,null,"erase");

Post correlati

Lascia un commento

TAG XHTML permessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Usa <pre> per racchiudere codice