javascript - 如何从矩形点计算旋转 Angular ？

Question

我有 4 个点 1、2、3、4 来闭合一个矩形。

点按以下方式排列在数组中:x1 y1 x2 y2 x3 y3 x4 y4

我遇到的问题是矩形可以旋转一个 Angular 。

如何计算原始点(灰色轮廓)和 Angular ？

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

我只是通过比较点来知道矩形是否是直的，例如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)";

}

Answer 1

您可以使用同一侧的任何坐标对来计算旋转 Angular 。请注意，数学 Angular 通常假设 0 与 +ve X 轴一样长，并通过逆时针旋转增加(因此沿 +ve Y 轴为 90°，-ve X 轴为 180°，依此类推)。

此外，javascript 三 Angular 函数返回以弧度为单位的值，这些值在用于 CSS 转换之前必须转换为度数。

如果形状旋转不超过90°，那么生活很简单，你可以使用直 Angular 三 Angular 形的正切比:

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

对于 OP，最好使用的 Angular 是 1 和 4，这样旋转保持在第一象限并且顺时针(根据 draft CSS3 spec )。在 JavaScript 术语中:

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

转换为度数:

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

如果旋转超过 90°，则需要调整 Angular 。例如如果 Angular 大于 90° 但小于 180°，则上面的结果为 -ve，需要加上 180°:

  rotationDegrees += 180;

此外，如果您使用页面尺寸，则 y 坐标会随着页面向下增加，这与正常的数学意义相反，因此您需要颠倒上面 y1 - y4 的意义.

编辑

根据 OP 中点的方向，以下是返回矩形中心和顺时针旋转度数的通用函数。这就是你所需要的，但如果你愿意，你可以自己旋转 Angular 使其“水平”。您可以应用三 Angular 函数来计算新 Angular 点或只做一些平均(类似于 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).
 *
 * @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];
}