如何从矩形点计算旋转角度？ [英] How to calculate rotation angle from rectangle points?

问题描述

我有4分 1 ， 2 ， 3

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

这些点是以下列方式在数组中的： 4 $ c> x1 y1 x2 y2 x3 y3 x4 > y4

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?

我想在javascript + css3-transform中重现这种效果，所以我需要先知道直线尺寸，然后与css一起旋转。

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.

我只知道矩形是直线通过比较点例如 y1 == y2

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)";

}

推荐答案

使用同一侧的任何坐标对计算旋转角度。注意，数学角通常假定为+ ve X轴的长度并且通过逆时针旋转而增加（因此沿着+ ve Y轴是90°，-ve X轴是180°等等）。

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).

此外，javascript三角函数返回以弧度表示的值，必须在用于CSS变换之前转换为度。

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

形状不旋转超过90°，那么生命是相当简单的，你可以使用直角三角形的切线比：

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

使用的角是1和4，使得旋转保持在第一象限和顺时针（根据草稿CSS3规范）。在javascript术语中：

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));

要转换为学位：

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

如果旋转角度大于90°，​​则需要调整角度。例如如果角度大于90°但小于180°，则会从上面得到-ve结果，需要增加180°：

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;

此外，如果使用页面尺寸，的正常情感感觉，所以你需要扭转上述<$ p $ c> y1 - y4 的感觉。

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.

基于OP中点的方向，以下是一个一般函数，以度为单位返回矩形的中心和顺时针旋转。这是所有你需要的，虽然你可以旋转角落是水平自己，如果你愿意。您可以应用三角函数来计算新的拐角或只是做一些平均值（类似于Ian的答案）。

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).
 */
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];
}

这篇关于如何从矩形点计算旋转角度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！