Skip navigation
Sam_poly
Currently Being Moderated

Creating Eraser over the image

Oct 25, 2011 5:41 AM

Hi,

I am trying to create the eraser functionlity can you please help me.

 

My issue -

I drawing with the pencile over the image and want to erase that graphic but not able to suucees please give some solution.

My backgroud page is image and i am adding zoomIn/ZoomOut functionality to image.

Is there solution to erase only graphic part and Image will remain as it is?

 

I want to create the Eraser like on the following site :- http://pixlr.com/editor/

 

Thanks

 
Replies
  • kglad
    62,188 posts
    Jul 21, 2002
    Currently Being Moderated
    Oct 25, 2011 7:04 AM   in reply to Sam_poly

    the easiest way is to fake it and use the graphics class'es draw methods to draw background colored lines.

     
    |
    Mark as:
  • kglad
    62,188 posts
    Jul 21, 2002
    Currently Being Moderated
    Oct 25, 2011 7:23 AM   in reply to Sam_poly

    you can use the bitmapdata class to change image pixels to transparent.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Oct 26, 2011 4:56 PM   in reply to kglad

    Hi Sam,

     

    as kglad suggested, you can manipulate bitmapData of the pencil drawing (assuming the pencil is drawing to bitmapData - fastest / best drawing).

    I created an example where in the background, there's a Bitmap image (just noise for the sake of the experiment but you can load real picture) and on top of that there's a Bitmap filled with semi-transparent red color. As you move your mouse, you erase the red bitmap.

     

    You can check the example here: http://dev.flashlabs.eu/examples/eraser/

     

    The code:

     

    package  {
        
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        import flash.geom.Rectangle;
        
        public class Eraser extends Sprite {
            
            private var bitmap:Bitmap;
            
            public function Eraser() {
                var background:Bitmap = createBackground();
                addChild(background);
                
                bitmap = createBitmap();
                addChild(bitmap);
                
                stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            }
            
            protected function mouseMoveHandler(event:MouseEvent):void {
                var bd:BitmapData = bitmap.bitmapData;
                var x:Number = bitmap.mouseX;
                var y:Number = bitmap.mouseY;
                
                var brushSize:Number = 20;
                
                bd.fillRect(new Rectangle(x - brushSize / 2, y - brushSize / 2, brushSize, brushSize), 0x00000000);
            }
            
            public function createBackground():Bitmap {
                var bd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
                bd.perlinNoise(5, 5, 5, 5, true, true);
                return new Bitmap(bd);
            }
            
            public function createBitmap():Bitmap {
                var bd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0xeeFF0000);
                return new Bitmap(bd);
            }
            
        }
        
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 10:07 PM   in reply to Peter Celuch

    Thanks Peter its working for my application.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 30, 2011 11:00 AM   in reply to Harshalsden

    I'm glad to hear it. If the question is answered, please do mark it like ANSWERED. Helpful doesn't close the question.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points