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]

有没有一种简单的方法来计算我在这张图片中符号化的矩形的旋转角度？

因为我不知道如何继续，所以我无法为您提供更多代码：

编辑：上面的函数从 4 个点中获取 minY 和 maxX 值。之后函数计算两点之间的距离。但是现在如何计算角度呢？

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. 用上述信息计算Leg相对的矩形：(H)；

4. 用上述信息计算矩形相邻边：(W)；

5. 计算斜边 (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>