ActionScript 3.0 - How to draw boxes at each corner of the MovieClip

Question

I am trying to draw 4 boxes at each corner of the MovieClips but can not figure out how to detect the top right corner, bottom left and bottom right corner. Is there any easier solutions that I could use to replace this technique or get it to works? Thanks

The below code is a rectangle with a 135 degrees rotation.

    var square:MovieClip = new MovieClip();
    square.graphics.lineStyle(2,0x00ff00);
    square.graphics.beginFill(0x0000FF);
    square.graphics.drawRect(0,0,100,50);
    square.graphics.endFill();
    square.x = 200;
    square.y = 150;
    square.rotation = 135;
    addChild(square);


trace(square.getBounds(square));
trace(this.getBounds(square));
trace(this.getBounds(this));

Answer 1

The getBounds() method returns you a rectangle object with the x an y coordinates/width and height of the display object relative to the object passed as a parameter. So:

square.getBounds(stage); will give you a rectangle the squares position relative to the stage (assuming the square is a child of the stage, but it could be any parent display object). In order to access the coordinates and dimensions, you can use it like this.

var bounds = square.getBounds(stage);
trace(bounds.x); 
trace(bounds.y);
trace(bounds.width);
trace(bounds.height)

UPDATE

Ah, I presume you need to find the corners of the rotated box, and not the corners of the bounding area. In that case you could probably use some trigonometry to with your angle of rotation, and find the length of the offset of your corners.

But I don't think that's necessary if I understand what you're trying to do. If you need to draw something (another box, say) on the corners of your square movie clip, you can add them as children of the square. That way, if you rotate the parent square, all the child movie clips will rotate with them. So:

var square:MovieClip = new MovieClip();
//... all your code from above to draw the square

var clip:MovieClip = new MovieClip();
//...some code here to draw some graphics in your clip

//Put the clip at the bottom right corner of the square
clip.x = square.width;
clip.y = square.height;
square.addChild(clip);

Answer 2

here you go , i have drawn two rectangle as a child of your main Rectangle , they will rotate , they will move when your parent Rectangle will rotate or move ...

var widthSquare:int = 100; var heightSquare:int = 50;

var square:MovieClip = new MovieClip(); square.graphics.lineStyle(2,0x00ff00); square.graphics.beginFill(0x0000FF); square.graphics.drawRect(0,0,widthSquare,heightSquare); square.graphics.endFill(); square.x = 200; square.y = 150; square.rotation = 135; addChild(square);

var square1width:int = widthSquare- (widthSquare-20); // if width of square1 is 20 subtract 20 var square1height:int = heightSquare-(heightSquare-10); // if height of square1 is 10 subtract 10

var square1:MovieClip = new MovieClip(); square1.graphics.lineStyle(2,0x000000); square1.graphics.beginFill(0x000000); square1.graphics.drawRect(0,0,square1width,square1height); square1.graphics.endFill(); square.addChild(square1);

var square2width:int = widthSquare- (widthSquare-30); // if width of square2 is 30 subtract 30 var square2height:int = heightSquare-(heightSquare-15); // if height of square2 is 15 subtract 15

var square2:MovieClip = new MovieClip(); square2.graphics.lineStyle(2,0x000000); square2.graphics.beginFill(0x000000); square2.graphics.drawRect(0,0,square2width,square2height); square2.graphics.endFill(); square2.x = widthSquare-square2width; square2.y = heightSquare-square2height; square.addChild(square2);

//square.rotation = 35;

Hope this will help you.. Try it.