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)

我希望有人可以帮我处理我的代码...
非常感谢jonas

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>