A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: dynamically drawing a rectangle with the mouse

Hybrid View

  1. #1
    Junior Member
    Join Date
    Jul 2008
    Posts
    14

    Question 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?

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    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_DOWNsetAnchor);
    stage.addEventListener(MouseEvent.MOUSE_UPcompleteRect);


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

    function 
    completeRect(e:MouseEvent):void{
        
    CANVAS.beginFill(0x222222);
        
    CANVAS.drawRect(_corner.x_corner.ye.stageX _corner.xe.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_DOWNsetAnchor);
    stage.addEventListener(MouseEvent.MOUSE_UPcompleteRect);


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

    function 
    completeRect(e:MouseEvent):void{
        if(
    _dragging){    
            
    _dragging false;
            
    stage.removeEventListener(MouseEvent.MOUSE_MOVEliveDrag);
            
    CANVAS.lineStyle(000);
            
    CANVAS.beginFill(0x222222)
            
    CANVAS.drawRect(_corner.x_corner.ye.stageX _corner.xe.stageY _corner.y);
        }
    }

    function 
    liveDrag(e:MouseEvent):void{
        
    CANVAS.clear();
        
    CANVAS.lineStyle(00x999999);
        
    CANVAS.drawRect(_corner.x_corner.ye.stageX _corner.xe.stageY _corner.y);


  3. #3
    Junior Member
    Join Date
    Jul 2008
    Posts
    14
    Many thanks . . Works perfectly & the boolean was something I was going to add

  4. #4
    Junior Member
    Join Date
    Jul 2008
    Posts
    14
    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)?

  5. #5
    Junior Member
    Join Date
    Jul 2008
    Posts
    14
    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 Attached Files

  6. #6
    Junior Member
    Join Date
    Jul 2008
    Posts
    14
    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_DOWNsetAnchor); 

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


    function 
    completeRect(e:MouseEvent):void
        if(
    _dragging){     
            
    _dragging false;         
            
    mySheet.removeEventListener(MouseEvent.MOUSE_MOVEliveDrag); 
            
    CANVAS.removeEventListener(MouseEvent.MOUSE_UPcompleteRect); 
            
    CANVAS.graphics.lineStyle(20x000000); 
            
    CANVAS.graphics.beginFill(0x222222.1); 
            
    CANVAS.graphics.drawRect(_corner.x_corner.ye.stageX _corner.xe.stageY _corner.y); 
            
    addChild(CANVAS);
        } 


    function 
    liveDrag(e:MouseEvent):void
        
    CANVAS.graphics.clear(); 
        
    CANVAS.graphics.lineStyle(20x000000); 
        
    CANVAS.graphics.drawRect(_corner.x_corner.ye.stageX _corner.xe.stageY _corner.y); 
        
    CANVAS.addEventListener(MouseEvent.MOUSE_UPcompleteRect); 
        
    addChild(CANVAS);
            

    Attached Images Attached Images

  7. #7
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center