dynamically drawing a rectangle with the mouse
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?
Here's a basic version you can paste into a new fla:
PHP Code:
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:
PHP Code:
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 );
}
Many thanks . . Works perfectly & the boolean was something I was going to add
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)?
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.
Attached Files
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?
PHP Code:
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 );
}
Attached Images
Add a clear() in the completeRect code.
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Click Here to Expand Forum to Full Width