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

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]] ）

...但是我得到的結果是-> angle : 67.75 ，絕對不是正確的旋轉角度。

之后，我僅使用corner[0]和corner[2]進行了計算，而不是使用corner[0]和corner[1] 。

所以我現在得到的結果是-20.62° 。 更好

---

現在我的問題是： 如何從我的corners數組中提取正確的點以進行計算？

您可以在此處嘗試該功能：

 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

如何從我的corners數組中提取正確的點進行計算？

計算的一個角就是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

之所以獲得意外的角度，是因為兩個矩形的角定義順序不同。

第一個具有其下長邊的兩個端點作為前兩個角，而第二個具有其短邊的兩個端點作為前兩個角作為前兩個角。 從圖像中可以看出，較短的一側確實具有較陡的角度。

正如您指出的那樣，您不能影響矩形定義中點的順序，可以按以下步驟進行：

• 通過增加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)