的Javascript：計算矩形的角度，4個邊角點

Question

我有一個matrix這樣的：

var matrix = [ 
    "00000000000000000000000", 
    "00000000001100000000000", 
    "00000000111110000000000", 
    "00000001111111000000000", 
    "00000111111111100000000", 
    "00000111111111000000000", 
    "00000011111100000000000", 
    "00000001110000000000000", 
    "00000000100000000000000", 
    "00000000000000000000000" 
] 

... ...我知道這個數字的4個角點（X/Y座標）（矩形的「1'-字符）如..

• [11,1]
• [5,4]
• [14,4]
• [8,8]

有一種簡單的方法來計算矩形的旋轉角度像我這個形象已經象徵？

因爲我不知道如何繼續我不能爲你提供更多的代碼比這

編輯：上面的函數獲取MINY和maxX的值從4點。之後功能是計算兩點之間的距離。但是現在如何計算角度？

function calculate_angle(corner_object) { 
 
    Array.prototype.calculate_distance = function() { 
 
    var x1=this[0],y1=this[1],x2=this[2],y2=this[3] 
 
    return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)).toFixed(2); 
 
    } 
 
    var list = [my_object.corner1,my_object.corner2,my_object.corner3,my_object.corner4] 
 
    var extreme_result = { 
 
    'xMax': list.filter(e => e[0] === Math.max(...list.map(e => e[0]))), 
 
    'yMin': list.filter(e => e[1] === Math.min(...list.map(e => e[1]))) 
 
    } 
 
    var distance = [extreme_result.xMax[0][0],extreme_result.xMax[0][1],extreme_result.yMin[0][0],extreme_result.yMin[0][1]].calculate_distance() 
 
    
 
    // distance between two points is "distance" 
 
    
 
    console.log(distance) 
 
} 
 

 

 
var my_object = { 
 
        "corner1":[5,4], 
 
        "corner2":[11,1], 
 
        "corner3":[14,4], 
 
        "corner4":[8,8] 
 
       } 
 
calculate_angle(my_object)

---

我希望有人能幫助我與我的代碼...
非常感謝提前，喬納斯

Answer 1

修訂

我認爲你可以按照這個腳本：

https://codepen.io/pablodarde/pen/aVEmGO

1. 獲得最高矩形基座頂點的位置;

2. 獲取下矩形基底頂點的位置;

3. 用上面的信息計算腿對面的矩形：（H）

4. 用上面的信息計算矩形相鄰腿：（W）

5. Calc的斜邊（I）：const I = Math.sqrt(Math.pow(H, 2) + Math.pow(W, 2));

6. 然後，你有夾角餘弦。const cosAngle = Math.cos(W/I);

7. 做獲取角度值：const angle = Math.acos(cosAngle);

//https://stackoverflow.com/questions/47365879/javascript-calculate-angle-of-rectangle-with-4-corner-points/47366425#47366425 
 

 
const matrix = [ 
 
    "00000000000000000000000", 
 
    "00000000001100000000000", 
 
    "00000000111110000000000", 
 
    "00000001111111000000000", 
 
    "00000111111111100000000", 
 
    "00000111111111000000000", 
 
    "00000011111100000000000", 
 
    "00000001110000000000000", 
 
    "00000000100000000000000", 
 
    "00000000000000000000000" 
 
]; 
 

 
function getRectangleLowerBaseVertice(arr) { 
 
    for (let i = arr.length -1; i > 0; i--) { 
 
    if (arr[i].indexOf('1') !== -1) { 
 
     return {line: i, column: arr[i].indexOf('1')}; 
 
    } 
 
    } 
 
} 
 

 
function getRectangleHigherBaseVertice(arr) { 
 
    let col = 0; 
 
    let previous = 0; 
 
    let line = 0; 
 
    for (let i = 0; i < arr.length; i++) { 
 
    if (arr[i].lastIndexOf('1') !== -1) { 
 
     if (arr[i].lastIndexOf('1') > previous) { 
 
     col = arr[i].lastIndexOf('1'); 
 
     previous = col; 
 
     line = i; 
 
     } 
 
    } 
 
    } 
 
    return {line: line, column: col}; 
 
} 
 

 
const higherBaseVertex = [ 
 
    Number(getRectangleHigherBaseVertice(matrix).line), 
 
    Number(getRectangleHigherBaseVertice(matrix).column), 
 
]; 
 

 
const lowerBaseVertex = [ 
 
    Number(getRectangleLowerBaseVertice(matrix).line), 
 
    Number(getRectangleLowerBaseVertice(matrix).column), 
 
]; 
 

 
function toDegrees (angle) { 
 
    return angle * (180/Math.PI); 
 
} 
 

 
const oppositeLeg = lowerBaseVertex[0] - higherBaseVertex[0]; 
 

 
const adjacentLeg = Math.abs(lowerBaseVertex[1] - higherBaseVertex[1]); 
 

 
const hypotenuse = Math.sqrt(Math.pow(oppositeLeg, 2) + Math.pow(adjacentLeg, 2)); 
 

 
const cosAngle = Math.cos(adjacentLeg/hypotenuse); 
 

 
const angle = toDegrees(Math.acos(cosAngle)); 
 

 
document.getElementById('lower-base-vertex').innerHTML = `lower base vertex, line: ${getRectangleLowerBaseVertice(matrix).line}, column: ${getRectangleLowerBaseVertice(matrix).column}`; 
 

 
document.getElementById('higher-base-vertex').innerHTML = `higher base vertex, line: ${getRectangleHigherBaseVertice(matrix).line}, column: ${getRectangleHigherBaseVertice(matrix).column}`; 
 

 
document.getElementById('opposite-leg').innerHTML = `Opposite leg: ${oppositeLeg}`; 
 

 
document.getElementById('adjacent-leg').innerHTML = `Adjacent leg: ${adjacentLeg}`; 
 

 
document.getElementById('hypotenuse').innerHTML = `hypotenuse: ${hypotenuse}`; 
 

 
document.getElementById('cos-angle').innerHTML = `angle cosine: ${cosAngle}`; 
 

 
document.getElementById('angle').innerHTML = `angle: ${angle}`;

<div id="lower-base-vertex"></div> 
 

 
<div id="higher-base-vertex"></div> 
 

 
<div id="rectangle-height"></div> 
 

 
<div id="opposite-leg"></div> 
 

 
<div id="adjacent-leg"></div> 
 

 
<div id="hypotenuse"></div> 
 

 
<div id="cos-angle"></div> 
 

 
<div id="angle"></div>