如何从矩形点计算旋转角度？

Question

我有4分1，2，3，4关闭矩形。

以下列方式，这些点位于数组中：x1 y1 x2 y2 x3 y3 x4 { {1}}

我遇到的问题是矩形可以以一定角度旋转。

如何计算原始点（灰色轮廓）和角度？

我试图在javascript + css3-transform中重现这个效果，所以我需要首先知道直尺寸，然后用css旋转。

我只是通过比较点来知道矩形是否笔直。 y4

y1==y2

Answer 1

您可以使用同一侧的任何坐标对来计算旋转角度。请注意，数学角度通常假定为+ ve X轴0，并且逆时针旋转增加（因此沿+ ve Y轴为90°，-ve X轴为180°，依此类推）。

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

如果形状旋转不超过90°，那么寿命相当简单，您可以使用直角三角形的tanget比率：

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

对于OP，使用的最佳角是1和4，以便旋转保持在第一象限和顺时针（按draft CSS3 spec）。用javascript术语：

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

转换为度数：

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

如果旋转超过90°，则需要调整角度。例如如果角度大于90°但小于180°，你将从上面得到一个-ve结果并需要增加180°：

  rotationDegrees += 180;

另外，如果你正在使用页面维度，y坐标会从页面向下增加，这与正常的数学意义相反，所以你需要扭转上面y1 - y4的感觉。

修改

根据OP中点的方向，以下是以度为单位返回矩形的中心和顺时针旋转的一般函数。这就是你应该需要的，尽管如果你愿意，你可以自己将角落旋转到“水平”。您可以应用三角函数来计算新角点或只做一些平均值（类似于Ian的答案）。

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

Answer 2

矩形的中心位于两个相对的角之间：

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

矩形的大小是两点之间的距离：

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

灰色矩形的角可以从中心和大小计算，例如左上角：

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

角度是正方形一侧的反正切：

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

（我不确定它返回的确切角度，或者你对这个问题的预期角度，所以你可以稍微测试一下。）

Answer 3

这是你从粉红线交叉点开始获得垂直粉色线和黑线之间的角度的方法：

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

尺寸可以在毕达哥拉斯定理的帮助下计算出来：

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

位置坐标（左和上）分别是x1和x3以及y1和y3的平均值。

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

你想使用负边缘技巧。

var marginLeft = -Math.ceil(width / 2);
var marginTop = -Math.ceil(height / 2);