capture the x and y position of a rectangle

[bumblingTiki]

Hi,

I'm working on a letting a user draw a rectangle to define a position on the stage. Te rectangle draws out ok. My problem is that I need to convert this dimensions and position of the rectangle in dynamic text. Plus, I need to make a way for the user to save these values into a text file.

Right now, I am able to capture the width and height, however, I can't seem to capture the x and y coordinates of the rectangle. I'd like to get the position of the top left corner if possible.

Here is what I have so far-

//Draws the final rectangle and logs the size and position

var hasRect: Boolean = false;

var rectHeight: Number;

var rectWidth: Number;

var rectXPos: Number;

var rectYPos: Number;

imprintHeightLabel.text = "Imprint Height: 0";

imprintWidthLabel.text = "Imprint Width: 0";

imprintXPosLabel.text = "Imprint X Position: 0";

imprintYPosLabel.text = "Imprint Y Position: 0";

function mUp(MouseEvent):void

{

mouseHolding = false;

    if(hasRect == false)

    {

    myDrawing.graphics.lineStyle(2, 0xFF0000, 1);

    myDrawing.graphics.beginFill(0xFF0000, 0.2);

    myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);

    myDrawing.graphics.endFill();

    hasRect = true;

    clearTemp();

    rectHeight = myDrawing.height;

    rectWidth = myDrawing.width;

    rectYPos = myDrawing.y;

    rectXPos = myDrawing.x;

    if(hasRect == true)

    {

        imprintHeightLabel.text = "Imprint Height: " + rectHeight;

        imprintWidthLabel.text = "Imprint Width: " + rectWidth;

        imprintXPosLabel.text = "Imprint X Position: " + rectXPos;

        imprintYPosLabel.text = "Imprint Y Position: " + rectYPos;

    }

    else

    {

        imprintHeightLabel.text = "Imprint Height: 0";

        imprintWidthLabel.text = "Imprint Width: 0";

        imprintXPosLabel.text = "Imprint X Position: 0";

        imprintYPosLabel.text = "Imprint Y Position: 0";

    }

    }

}

[moccamaximum]

This code throws 26 errors. Please consider posting your whole code, or at least the part where the actual drawing works.

[bumblingTiki]

Ok. here is the complete code

import flash.display.Sprite;

//Draws a transluscent rectangle

var temporaryDrawing:Shape = new Shape();

addChild(temporaryDrawing);

temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);

var myDrawing:Shape = new Shape();

addChild(myDrawing);

myDrawing.graphics.lineStyle(2, 0xFF0000, 1);

var mouseHolding:Boolean = false;

var clickedX:Number;

var clickedY:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

function mDown(MouseEvent):void

{

myDrawing.graphics.clear();

hasRect = false;

mouseHolding = true;

clickedX = mouseX;

clickedY = mouseY;

}

//Draws the final rectangle and logs the size and position

var hasRect: Boolean = false;

var rectHeight: Number;

var rectWidth: Number;

var rectXPos: Number;

var rectYPos: Number;

imprintHeightLabel.text = "Imprint Height: 0";

imprintWidthLabel.text = "Imprint Width: 0";

imprintXPosLabel.text = "Imprint X Position: 0";

imprintYPosLabel.text = "Imprint Y Position: 0";

function mUp(MouseEvent):void

{

mouseHolding = false;

    if(hasRect == false)

    {

    myDrawing.graphics.lineStyle(2, 0xFF0000, 1);

    myDrawing.graphics.beginFill(0xFF0000, 0.2);

    myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);

    myDrawing.graphics.endFill();

    hasRect = true;

    clearTemp();

    rectHeight = myDrawing.height;

    rectWidth = myDrawing.width;

    rectYPos = myDrawing.y;

    rectXPos = myDrawing.x;

    if(hasRect == true)

    {

        imprintHeightLabel.text = "Imprint Height: " + rectHeight;

        imprintWidthLabel.text = "Imprint Width: " + rectWidth;

        imprintXPosLabel.text = "Imprint X Position: " + rectXPos;

        imprintYPosLabel.text = "Imprint Y Position: " + rectYPos;

    }

    else

    {

        imprintHeightLabel.text = "Imprint Height: 0";

        imprintWidthLabel.text = "Imprint Width: 0";

        imprintXPosLabel.text = "Imprint X Position: 0";

        imprintYPosLabel.text = "Imprint Y Position: 0";

    }

    }

}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(MouseEvent):void

{

    if (mouseHolding)

    {

        if(hasRect == false)

        {

        clearTemp();

        temporaryDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);

        }

    }

}

function clearTemp():void

{

temporaryDrawing.graphics.clear();

temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);

}

//var imprintSprite: Sprite = new Sprite;

//addChild(myDrawing);

//Label Text

[moccamaximum · Accepted solution]

Little Tip:Your code is hard to read. Doesn`t matter for a Machine (compiler), but makes it a pain to debug with a human brain. Make it a habit to structure your code

//1.imports

//2.VARS

//3.EventListeners

//4.functions

and use the Formatting function of Flash.

MouseEvents have the nice habit to have a stageX/stageY property.

So when a MouseEvent fires you can easily get Information where relative to the stage it fired.

You have to rewrite your mDown/mUp functions like so:

function mUp(e:MouseEvent):void

function mDown(e:MouseEvent):void

then have 4 varibales inside the functions (2 in each) that store the events stageX, stageY properties, like so:

function mUp(e:MouseEvent):void

{

    var tempUpX:Number  = e.stageX;

    var tempUpY:Number = e.stage.Y;

....

//similar in mDown

then compare the Numbers and return the minor one: this will be the value you want to show in your Textfields, that way you don`t have to know where the user started the actually drawing, the values will always give you the left upper corner of your rectangle.

[bumblingTiki]

Sorry about the sloppy code. It's a work in progress..

Your suggestion worked like a charm! Thanks!

[bumblingTiki]

Here is what I did to get the top left corner. Now, I am trying to populate that value of the x position into a number stepper and then allow adjustments, but it's not working. I've managed to stave off the IO errors I was receiving, though.

What I want to do is let the user draw a rectangle. Then find the x and y position of the top left cornder of the rectangle along with the rectangle's height and width. These 4 values are updating in dynamic text fields. All of this works now.

However, I want to make it so the user can see the values update in numeric steppers and allow the user to use the numeric steppers to make tweaks. Eventually I want the user to select and place the rectangle too.

Here is what I have so far. The numeric stepper sets to it's default value in the variable, but that's all I've got so far.

import flash.display.Sprite;

import fl.controls.NumericStepper;

//Draws a transluscent rectangle

var temporaryDrawing:Shape = new Shape();

addChild(temporaryDrawing);

temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);

var myDrawing:Shape = new Shape();

addChild(myDrawing);

myDrawing.graphics.lineStyle(2, 0xFF0000, 1);

var mouseHolding:Boolean = false;

var clickedX:Number;

var clickedY:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

var clickDownY:Number = new Number;

var clickDownX:Number = new Number;

function mDown(e:MouseEvent):void

{

var tempDownX:Number = new Number;

var tempDownY:Number = new Number;

     tempDownX = e.stageX;

     tempDownY = e.stageY;

     clickDownY = tempDownY;

     clickDownX = tempDownX;

    myDrawing.graphics.clear();

    hasRect = false;

    mouseHolding = true;

    clickedX = mouseX;

    clickedY = mouseY;

}

//Draws the final rectangle and logs the size and position

var hasRect: Boolean = false;

var rectHeight: Number;

var rectWidth: Number;

var rectXPos: Number;

var rectYPos: Number;

imprintHeightLabel.text = "Imprint Height: 0";

imprintWidthLabel.text = "Imprint Width: 0";

imprintXPosLabel.text = "Imprint X Position: 0";

imprintYPosLabel.text = "Imprint Y Position: 0";

var clickUpX: Number = new Number;

var clickUpY: Number = new Number;

var absYPos: Number = new Number;

var absXPos: Number = new Number;

function mUp(e:MouseEvent):void

{

     var tempUpX:Number  = new Number;

        var tempUpY:Number = new Number;

     tempUpX = e.stageX;

     tempUpY = e.stageY;

     clickUpY = tempUpY;

     clickUpX = tempUpX;

    mouseHolding = false;

    //compares the mouse_down and mouse_up to see which one creates the top left corner position

    if(hasRect == false)

    {

        myDrawing.graphics.lineStyle(2, 0xFF0000, 1);

        myDrawing.graphics.beginFill(0xFF0000, 0.2);

        myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);

        myDrawing.graphics.endFill();

        hasRect = true;

        clearTemp();

            //Comparison Determines if the "ClickUp or ClickDown is at the top left corner

            if(clickDownY < clickUpY)

            {

                absYPos = clickDownY;

            }

            else if (clickDownY > clickUpY)

            {

                absYPos = clickUpY;

            }

            if(clickDownX < clickUpX)

            {

                absXPos = clickDownX;

            }

            else if (clickDownX > clickUpX)

            {

                absXPos = clickUpX;

            }

            rectHeight = myDrawing.height;

            rectWidth = myDrawing.width;

            rectYPos = absYPos;

            rectXPos = absYPos;

            if(hasRect == true)

            {

                imprintHeightLabel.text = "Imprint Height: " + rectHeight;

                imprintWidthLabel.text = "Imprint Width: " + rectWidth;

                imprintXPosLabel.text = "Imprint X Position: " + absXPos;

                imprintYPosLabel.text = "Imprint Y Position: " + absYPos;

            }

            else

            {

                imprintHeightLabel.text = "Imprint Height: 0";

                imprintWidthLabel.text = "Imprint Width: 0";

                imprintXPosLabel.text = "Imprint X Position: 0";

                imprintYPosLabel.text = "Imprint Y Position: 0";

            }

    }

}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(MouseEvent):void

{

    if (mouseHolding)

    {

        if(hasRect == false)

        {

        clearTemp();

        temporaryDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);

        }

    }

}

function clearTemp():void

{

    temporaryDrawing.graphics.clear();

    temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);

}

xPosAdj.addEventListener(Event.CHANGE, adjustXPosition);

var stepperValue: Number = new Number;

function adjustXPosition(Evt:Event):void

{

    stepperValue = xPosAdj.value;

    if (hasRect == true)

    {

        stepperValue = rectXPos;

    }

    else

    {

        stepperValue = 0;

    }

}

[moccamaximum]

To set/get the values of a NumericStepper named "numStep" you would write this:

function setNumStepper(_int:Number):void{

    numStep.value = _int;

}

function getNumStepper():Number{

    return(numStep.value);

}

setNumStepper(5);//sets the Numeric Stepper to 5

getNumStepper();//returns 5

//listen for changes on the NumericStepper

numStep.addEventListener(Event.CHANGE, setStep);

function setStep(e:Event):void{

    trace(getNumStepper());

}