Drawing a Rotated Rectangle

Question

I realize this might be more of a math problem.

To draw the lines for my rectangles I need to solve for their corners. I have a rectangle center at (x,y) With a def

Answer 1

First transform the centre point to 0,0

X' = X-x

Y' = Y-y

Then rotate for an angle of A

X'' = (X-x) * cos A - (Y-y) * sin A

Y'' = (Y-y) * cos A + (X-x) * sin A

Again transform back the centre point to x,y

X''' = (X-x) * cos A - (Y-y) * sin A + x

Y''' = (Y-y) * cos A + (X-x) * sin A + y

Hence compute for all 4 points of (X,Y) with following transformation

X''' = (X-x) * cos A - (Y-y) * sin A + x

Y''' = (Y-y) * cos A + (X-x) * sin A + y

where x, y are the centre points of rectangle and X,Y are the corner points You have n't defined correctly even the corner points when Angle is 0 as I have given in the comments.

After substituting you will get

UL  =  x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
UR  =  x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A
BL =   x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
BR  =  x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A

I think this suits your solution.

Answer 2

See 2D Rotation.

q = initial angle, f = angle of rotation.

x = r cos q 
y = r sin q

x' = r cos ( q + f ) = r cos q cos f - r sin q sin f 
y' = r sin ( q + w ) = r sin q cos f + r cos q sin f

hence:
x' = x cos f - y sin f
y' = y cos f + x sin f

Answer 3

use this....I got succeded...

 ctx.moveTo(defaults.x1, defaults.y1);

    // Rotation formula
    var x2 = (defaults.x1) + defaults.lineWidth * Math.cos(defaults.rotation * (Math.PI / 180));
    var y2 = (defaults.y1) + defaults.lineWidth * Math.sin(defaults.rotation * (Math.PI / 180));

    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 90) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 90) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineWidth * Math.cos((defaults.rotation + 180) * (Math.PI / 180));
    y2 = (y2) + defaults.lineWidth * Math.sin((defaults.rotation + 180) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 270) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 270) * (Math.PI / 180));

Answer 4

Rotation matrix (this is becoming a FAQ)

Answer 5

If 'theta' is the anti-clockwise angle of rotation, then the rotation matrix is:

| cos(theta)  -sin(theta) |
| sin(theta)   cos(theta) |

i.e.

x' = x.cos(theta) - y.sin(theta)
y' = x.sin(theta) + y.cos(theta)

If the rotation point isn't at the origin, subtract the center of rotation from your original coordinates, perform the rotation as shown above, and then add the center of rotation back in again.

There's examples of other transformations at http://en.wikipedia.org/wiki/Transformation_matrix

Answer 6

One of the easiest ways to do this is to take the location of the point before rotation and then apply a coordinate transform. Since it's centred on (0,0), this is simply a case of using:

x' = x cos(theta) - y sin(theta)

y' = y cos(theta) + x sin(theta)