dynamically drawing a rectangle with the mouse

[khamul02]

I've done a bit of searching here and have come up empty.
I need a simple example of as 3 that allows the user to draw a rectangle using mouseDown (start location/point) and mouseUp (end location/point).

Can you guys point me to a tutorial or class file or fla?

[neznein9]

Here's a basic version you can paste into a new fla:

const CANVAS:Graphics = graphics;
var _corner:Point;

stage.addEventListener(MouseEvent.MOUSE_DOWN, setAnchor);
stage.addEventListener(MouseEvent.MOUSE_UP, completeRect);


function setAnchor(e:MouseEvent):void{
    CANVAS.clear();
    _corner = new Point(e.stageX, e.stageY);
}

function completeRect(e:MouseEvent):void{
    CANVAS.beginFill(0x222222);
    CANVAS.drawRect(_corner.x, _corner.y, e.stageX - _corner.x, e.stageY - _corner.y);
} 

And a little more advanced:

const CANVAS:Graphics = graphics;
var _dragging:Boolean = false;
var _corner:Point;

stage.addEventListener(MouseEvent.MOUSE_DOWN, setAnchor);
stage.addEventListener(MouseEvent.MOUSE_UP, completeRect);


function setAnchor(e:MouseEvent):void{
    if(!_dragging){
        CANVAS.clear();
        _corner = new Point(e.stageX, e.stageY);
        _dragging = true;
        stage.addEventListener(MouseEvent.MOUSE_MOVE, liveDrag);
    }
}

function completeRect(e:MouseEvent):void{
    if(_dragging){    
        _dragging = false;
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, liveDrag);
        CANVAS.lineStyle(0, 0, 0);
        CANVAS.beginFill(0x222222)
        CANVAS.drawRect(_corner.x, _corner.y, e.stageX - _corner.x, e.stageY - _corner.y);
    }
}

function liveDrag(e:MouseEvent):void{
    CANVAS.clear();
    CANVAS.lineStyle(0, 0x999999);
    CANVAS.drawRect(_corner.x, _corner.y, e.stageX - _corner.x, e.stageY - _corner.y);
} 

[khamul02]

Many thanks . . Works perfectly & the boolean was something I was going to add

[khamul02]

One thing, I'm nesting it in a MC so that the shape can only be drawn there and no where else on the stage.
It draws the shape behind my other mc's nested there (which will be generated dynamically at some point). So is there a way set the level of the rect so that it is at the top level of the MC (and not the entire movie/_root/stage)?

[khamul02]

Here is an example of what is going on. Basically I want the shape to be drawn over the text fields. At some point I'm going to have the shape snap to the coordinates of the text boxes. I'm attempting to make an excel like spreadsheet app.

[khamul02]

Well, I got the indexing figured out. It needs to be a sprite (I guess) but now I'm getting this occasional weird doubling type effect?

const CANVAS:Sprite = new Sprite();
var _dragging:Boolean = false; 
var _corner:Point; 

mySheet.addEventListener(MouseEvent.MOUSE_DOWN, setAnchor); 

function setAnchor(e:MouseEvent):void{ 
    if(!_dragging){ 
        CANVAS.graphics.clear(); 
        _corner = new Point(e.stageX, e.stageY); 
        _dragging = true; 
        mySheet.addEventListener(MouseEvent.MOUSE_MOVE, liveDrag); 
        
    } 
} 

function completeRect(e:MouseEvent):void{ 
    if(_dragging){     
        _dragging = false;         
        mySheet.removeEventListener(MouseEvent.MOUSE_MOVE, liveDrag); 
        CANVAS.removeEventListener(MouseEvent.MOUSE_UP, completeRect); 
        CANVAS.graphics.lineStyle(2, 0x000000); 
        CANVAS.graphics.beginFill(0x222222, .1); 
        CANVAS.graphics.drawRect(_corner.x, _corner.y, e.stageX - _corner.x, e.stageY - _corner.y); 
        addChild(CANVAS);
    } 
} 

function liveDrag(e:MouseEvent):void{ 
    CANVAS.graphics.clear(); 
    CANVAS.graphics.lineStyle(2, 0x000000); 
    CANVAS.graphics.drawRect(_corner.x, _corner.y, e.stageX - _corner.x, e.stageY - _corner.y); 
    CANVAS.addEventListener(MouseEvent.MOUSE_UP, completeRect); 
    addChild(CANVAS);
        
} 

[neznein9]

Add a clear() in the completeRect code.