CODEWITHSUNDEEP
flashactionscript-3
Bobby Francis Joseph
Bobby Francis Joseph

Reputation: 600

Recreating the brush tool using AS3 code to develop a paint application (Bitmap class is used)

I am developing a Paint Application is AS3. What I am trying is to basically mimick the MS Paint. I need to create the brush tool. The brush tool has lot of shapes in it (tip of the brush) like sqaure,circle,rhombus . I had initially planned of using the graphics class but some wise guys here advised me to use the Bitmap class. I have developed the class and it seems to work fine. But two issues that are affecting me now

  1. If I increase the speed of the mouse the the drawing becomes discontinuous.
  2. An idea I have for overcoming this is to calculate the points between last point and current point and draw circles in those points.But this idea is going to give me problems when I move the mouse in the pattern of a curve.

package {

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.*;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.ui.Keyboard;

[SWF(width=600,height=400,backgroundColor=0x000000)]

/**
* Demonstrates BitmapData's draw() command by duplicating the entirety of the stage using draw()
* whenever the space bar is pressed. A smaller copy is also drawn onto the stage to show how draw()
* can be used to transform the pixels in the image being drawn.
*/
public class DrawTest extends Sprite {

    private var _circle:Sprite;
    private var _bitmapData:BitmapData;


    /**
    * Constructor. Creates bitmap that will be drawn into and circle that will follow the mouse.
    * A listener is also set up to handle then a key is pressed.
    */
    public function DrawTest() {

        createBitmap();
        createCircle();

        stage.addEventListener(MouseEvent.MOUSE_DOWN,_handleMouseEventBrush);
        stage.addEventListener(MouseEvent.MOUSE_UP,_handleMouseEventBrush);

    }

    /**
    * Creates bitmap data that the stage contents will be drawn into and adds this to the stage.
    */
    private function createBitmap():void {
        _bitmapData=new BitmapData(stage.stageWidth,stage.stageHeight,true,0x000000);
        var bitmap:Bitmap=new Bitmap(_bitmapData);
        addChild(bitmap);
    }

    /**
    * Creates a circle shape that is set to follow the mouse as it moves.
    */
    private function createCircle():void {
        _circle=new Sprite  ;
        _circle.graphics.beginFill(0xFF0000);
        _circle.graphics.drawCircle(0,0,10);
        _circle.graphics.endFill();
        addChild(_circle);
        _circle.x=stage.mouseX;
        _circle.y=stage.mouseY;
        _circle.startDrag();

    }


    private function _handleMouseEventBrush(e:MouseEvent):void {



        switch (String(e.type)) {

            case "mouseDown" :
                _bitmapData.draw(stage);
                stage.addEventListener(MouseEvent.MOUSE_MOVE,_handleMouseEventBrush);
                break;

            case "mouseUp" :
                stage.removeEventListener(MouseEvent.MOUSE_MOVE,_handleMouseEventBrush);
                break;

            case "mouseMove" :
                _bitmapData.draw(stage);


        }
    }

}

Does anyone idea as to how to overcome this.

Upvotes: 1

Views: 2536

Answers (2)

Jas
Jas

Reputation: 415

You can use a library like Grafitti - http://www.nocircleno.com/graffiti/

It is very simple to use and has a lot of interesting features.

Tip: use the 2.5 version

Upvotes: 0

philipp
philipp

Reputation: 16515

you could try to use the Event.ENTER_FRAME to execute the draw commands. MOUSE_MOVE is executed more often and the screen is re-rendered by flash depending on the framerate. But I am not sure if this is better. greets

Upvotes: 1

Related Questions