如何使用角位置计算矩形的角度？

Question

我有一个像这样的矩形......

...我也知道矩形的角位置，如下面的数组：

var corners = [[107, 0], [0, 21], [111, 24], [4, 45]]

因为我需要计算矩形的角度，就像我在上图中所表示的一样，我的想法就是使用这段代码：

var rectangle_angle = ((180/Math.PI) * Math.atan((a[1] - b[1]) / (a[0] - b[0]))).toFixed(2)
console.log('angle : ' + rectangle_angle)

在上面的例子中，我使用前两个角点来计算角度：

var a = corners[0], b = corners[1]

但是，例如我正在使用如下的矩形并试图计算矩形的角度......

（角落：[[101, 0], [110, 22], [0, 38], [9, 60]]）

...但我得到的结果是这个 - ＆gt; angle : 67.75，绝对不是正确的旋转角度。

之后我通过使用corner[0]和corner[2]进行计算而不是使用corner[0]和corner[1]来解决问题。

所以我现在得到的结果是-20.62°。方式更好。

现在我的问题：如何从角点数组中提取出我必须用于计算的正确点？

您可以在此处尝试此功能：

var corners = [[107, 0], [0, 21], [111, 24], [4, 45]]

var a = corners[0], b = corners[1]
var rectangle_angle = ((180/Math.PI) * Math.atan((a[1] - b[1]) / (a[0] - b[0]))).toFixed(2)
console.log('angle : ' + rectangle_angle)

Answer 1

  

如何从角点数组中提取出我必须用于计算的正确点？

您计算的一角是x值为0的位置。因此，您需要搜索x = 0值：

var a;
$.each(corners, function(i, corner) {
    if (corner[0] === 0) {
        // you have found your a corner (corners[i])
        a = corner;
    }
});

你计算的b角是y值为0的地方：

var b;
$.each(corners, function(i, corner) {
    if (corner[1] === 0) {
        // you have found your b corner (corners[i])
        b = corner;
    }
});

但是，您的计算需要修复如下：

var rectangle_angle = ((180/Math.PI) * Math.atan((a[1] - b[1]) / (b[0] - a[0]))).toFixed(2)

Answer 2

你得到意想不到的角度的原因是你的两个矩形的角落定义不同。

第一个角落的前两个角落是长侧的两个终点，而第二个角落的前两个角落是短<的两个终点/ strong>它的一面。从图像中可以看出，短边确实具有更陡的角度。

如您所示，您无法影响矩形定义中点的顺序，您可以按以下步骤操作：

• 通过增加Y坐标对角进行排序：第一个角将是底部角，接下来的两个角将是底角有边的点
• 在这两条边中，选择最长的边
• 根据该边缘执行角度计算

以下是一些可用于实现此目的的代码：

function rectangleTilt(rect) {
    const distance2 = (a, b) => (a[0]-b[0])**2 + (a[1]-b[1])**2,
        angle = (a, b) => 180 - Math.atan2(b[1]-a[1], b[0]-a[0]) * 180 / Math.PI,
        // Sort the corners by increasing Y coordinate:
        [a, b, c] = rect.slice().sort( (a, b) => a[1] - b[1] );
    // Return the angle of the longest edge having the lowest corner:
    return distance2(a, b) < distance2(a, c) ? angle(a, c) : angle(a, b);
}

function drawRectangle(ctx, rect) {
    const [a, b, c, d] = rect.slice().sort( (a, b) => a[1] - b[1] );
    ctx.moveTo(a[0], a[1]);
    ctx.lineTo(b[0], b[1]);
    ctx.lineTo(d[0], d[1]);
    ctx.lineTo(c[0], c[1]);
    ctx.lineTo(a[0], a[1]);
    ctx.stroke(); 
}

const ctx = canvas.getContext("2d");
// Make Y axis go upwards, and X axis backwards
ctx.transform(-1, 0, 0, -1, canvas.width, canvas.height);

var rect = [[101, 0], [110, 22], [0, 38], [9, 60]];
drawRectangle(ctx, rect);
console.log(rectangleTilt(rect).toFixed(2) + "°");

<canvas id="canvas" width="200"></canvas>

Answer 3

通过corners过滤，以便您可以获得角落a和b：

const corners = [[107, 0], [0, 21], [111, 24], [4, 45]]

const cornerA = corners.filter(x => x[1] == 0).reduce((a, b) => a.concat(b))
const cornerB = corners.filter(y => y[0] == 0).reduce((a, b) => a.concat(b))

const rectangleAngle = ((180/Math.PI) * Math.atan((cornerA[1] - cornerB[1]) / (cornerA[0] - cornerB[0]))).toFixed(2)

console.log(rectangleAngle)