28

I have 4 points 1,2,3,4 that closes a rectangle.

The points are in a array in this following way: x1 y1 x2 y2 x3 y3 x4 y4

The problem I have is that the rectangle can be rotated in a angle.

How can I calculate the original points (gray outline), and the angle?

enter image description here

I'm trying to reproduce this effect in javascript+css3-transform, so I need to first know the straight dimensions and then rotate with the css.

I just know if the rectangle is straight by comparing points e.g. y1==y2

if(x1==x4 && x2==x3 && y1==y2 && y4==y3){

    rectangle.style.top = y1;
    rectangle.style.left = x1;
    rectangle.style.width = x2-x1;
    rectangle.style.height = y4-y1;
    rectangle.style.transform = "rotate(?deg)";

}

3 Answers 3

24

You can use any coordinate pair on the same side to calculate the rotation angle. Note that mathematic angles normally assume 0 as long the +ve X axis and increase by rotating anti–clockwise (so along the +ve Y axis is 90°, -ve X axis is 180° and so on).

Also, javascript trigonometry functions return values in radians that must be converted to degrees before being used in a CSS transform.

If the shape is not rotated more than 90°, then life is fairly simple and you can use the tanget ratio of a right angle triangle:

tan(angle) = length of opposite side / length of adjacent side

For the OP, the best corners to use are 1 and 4 so that rotation is kept in the first quadrant and clockwise (per the draft CSS3 spec). In javascript terms:

var rotationRadians = Math.atan((x1 - x4) / (y1 - y4));

To convert to degrees:

var RAD2DEG = 180 / Math.PI;
var rotationDegrees = rotationRadians * RAD2DEG;

If the rotation is more than 90°, you will need to adjust the angle. e.g. where the angle is greater than 90° but less than 180°, you'll get a -ve result from the above and need to add 180°:

  rotationDegrees += 180;

Also, if you are using page dimentions, y coordinates increase going down the page, which is the opposite of the normal mathetmatic sense so you need to reverse the sense of y1 - y4 in the above.

Edit

Based on the orientation of points in the OP, the following is a general function to return the center and clockwise rotation of the rectangle in degrees. That's all you should need, though you can rotate the corners to be "level" yourself if you wish. You can apply trigonometric functions to calculate new corners or just do some averages (similar to Ian's answer).

/** General case solution for a rectangle
 *
 *  Given coordinages of [x1, y1, x2, y2, x3, y3, x4, y4]
 *  where the corners are:
 *            top left    : x1, y1
 *            top right   : x2, y2
 *            bottom right: x3, y3
 *            bottom left : x4, y4
 *
 *  The centre is the average top left and bottom right coords:
 *  center: (x1 + x3) / 2 and (y1 + y3) / 2
 *
 *  Clockwise rotation: Math.atan((x1 - x4)/(y1 - y4)) with
 *  adjustment for the quadrant the angle is in.
 *
 *  Note that if using page coordinates, y is +ve down the page which
 *  is the reverse of the mathematic sense so y page coordinages
 *  should be multiplied by -1 before being given to the function.
 *  (e.g. a page y of 400 should be -400).
 *
 * @see https://stackoverflow.com/a/13003782/938822
 */
function getRotation(coords) {
    // Get center as average of top left and bottom right
    var center = [(coords[0] + coords[4]) / 2,
                  (coords[1] + coords[5]) / 2];

    // Get differences top left minus bottom left
    var diffs = [coords[0] - coords[6], coords[1] - coords[7]];

    // Get rotation in degrees
    var rotation = Math.atan(diffs[0]/diffs[1]) * 180 / Math.PI;

    // Adjust for 2nd & 3rd quadrants, i.e. diff y is -ve.
    if (diffs[1] < 0) {
        rotation += 180;
      
    // Adjust for 4th quadrant
    // i.e. diff x is -ve, diff y is +ve
    } else if (diffs[0] < 0) {
        rotation += 360;
    }
    // return array of [[centerX, centerY], rotation];
    return [center, rotation];
}
3
  • thanks a lot, I did not get the <90 angles, can you explain me? seem to be working fine, with some glitches, jsfiddle.net/Victornpb/nBKAP I also confused the matriz order, but I made the changes. acctually I'm tring to convert Collada to js+css, but seems a long road, I have no idea how to deal with Z coordinates.
    – Vitim.us
    Commented Oct 22, 2012 at 4:17
  • The point order and orientation in the fiddle is different to your post. It seems you are using cartesian coordinates, so where in the above I have coords[0] - coords[6] you need x3 - x4 and where I have coords[1] - coords[7] you need y3 - y4.
    – RobG
    Commented Oct 22, 2012 at 4:38
  • yeah Google sketchup uses cartesian. So instead of inverting axes I just swapped the top property to bottom to match things. And the rect points is actually in another order, is actually bottom-right-counter-cw [3,2][4,1] not top-left-cw [1,2][4,3]
    – Vitim.us
    Commented Oct 22, 2012 at 4:54
12

The center of the rectangle is right between two opposite corners:

cx = (x1 + x3) / 2
cy = (y1 + y3) / 2

The size of the rectangle is the distance between two points:

w = sqrt(pow(x2-x1, 2) + pow(y2-y1, 2))
h = sqrt(pow(x3-x2, 2) + pow(y3-y2, 2))

The corners of the gray rectangle can be calculated from the center and the size, for example the top left corner:

x = cx - w / 2
y = cy - h / 2

The angle is the arctangent of a side of the square:

a = arctan2(y4 - y1, x4 - x1)

(I'm not sure exactly which angle it returns, or what angle you expect for that matter, so you get to test a bit.)

2
  • The required angle is the clockwise rotation. If the OP is using page coordinates, the Y coordinate has the wrong sense (+ve down the page whereas Math trig functions epxect -ve in that direction), so your expression should be Math.arctan2(-(y1 - y4), x1 - x4). But that will only work in the first quadrant and needs adjustment if the angle is greater than 90° (e.g. in the second quadrant it will give -45° instead of 135°, in the 3rd it will give -135° instead of 225°).
    – RobG
    Commented Oct 22, 2012 at 3:22
  • @RobG: Judging from the blue coordinate system indicator in the picture, the OP is using a Y coordinate that is positive upwards, not downwards. I don't know if the op wants degrees or radians, or if he is limited to positive angles.
    – Guffa
    Commented Oct 22, 2012 at 7:42
0

This is how you get the angle between the vertical pink line and the black line starting at the pink line intersection:

var deg = 90 - Math.arctan((x2-x1) / (y2-y1));

The dimensions can be calculated with the help of the Pythagoras theorem:

var width = Math.sqrt((x2-x1)^2 / (y2-y1)^2));
var height = Math.sqrt((x1-x4)^2) / (y4-y1)^2));

The positional coordinates (left and top) are the averages of x1 and x3 and y1 and y3 respectively.

var left = Math.floor((x1 + x3) / 2);
var top = Math.floor((y1 + y3) / 2);

You want to use the negative-margin trick.

var marginLeft = -Math.ceil(width / 2);
var marginTop = -Math.ceil(height / 2);
1
  • 4
    Javascript trigonometry functions (such as Math.atan) return values in radians. There are Math.PI radians in 180°. Anyway, you're making life harder than it needs to be, the rotation of any side can be used, so the clockwise rotation angle (in radians) can be calulated from any coordinate pair on the same side, e.g.: Math.asin((x4-y1)/(y1-y4)). Note that where rotation exceeds 90°, further processing is required.
    – RobG
    Commented Oct 22, 2012 at 0:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.