Rotate a rectangle around a point

Question

How would I get 4 points rotated to some extent around the pointer to form a rectangle? I can rotate a point around a point, but I cannot compensate for it to create a rectangle that is not distorted.

Answer 1

If you can rotate a point around a point, then you need to easily rotate it, you just rotate 4 points.

Here is the js function to rotate a point around the origin:

function rotate_point(pointX, pointY, originX, originY, angle) {
    angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
        y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
    };
}

And then you can do it with every point. Here is an example: http://jsfiddle.net/dahousecat/4TtvU/

Change the angle and press mileage to see the result ...