如何找到2个矩形的交点？

Question

我正在尝试将两个矩形绘制为一个形状，并使用 HTML5 canvas.

包含角度注释

我想要实现的完成版本是这样的：

如何找到内角的交点以知道在哪里绘制角度注释？

let canvas=document.getElementById("canvas");
let ctx=canvas.getContext("2d");
    
// rectangle dimensions    
let height = 50;
let width = 200;

// starting coordinates
let x = 20;
let y = 20;

// translate to starting coordinates
ctx.translate(x, y);

// draw first rectangle 
ctx.strokeRect(0,0,width,height);

// translate to the end of the first rectangle
ctx.translate(width, 0);

// rotate canvas by 45 degrees
ctx.rotate(45 * Math.PI / 180);

// draw second rectangle
ctx.strokeRect(0,0,width,height);

<!doctype html>
<html>
<head>
<style>
    body{ background-color: rgb(255, 255, 255); }
</style>
</head>
<body>
    <canvas id="canvas" width=700 height=500></canvas>
</body>
</html>

Answer 1

如果我们观察你的两个重叠形状，我们可以发现一些有趣的东西：你想知道的点和两个附近的点形成一个三角形。

让我们仔细看看这个三角形的哪些参数是我们真正知道的：

c 边 - 这只是矩形的高度
点 B - 第一个矩形的起点 + 宽度
点 A - 第一个矩形的起点 + 它的宽度和高度
b 和 c 之间的角度 - 90°
c 和 a 之间的角度 - 如您所见，正好是旋转的一半 (45° / 2 = 22.5°)
b和a的夹角-180°（67.5°）减去前两个角后的余数

现在我们感兴趣的是点C，它距离点Ab边长度.

根据上面给出的所有信息，我们得出结论，这个三角形是所谓的 ASA 三角形，意思是 'Angle, Side, Angle' - 正如我们所知的两个角和角之间的边。

根据正弦定律，我们可以使用这个方便的等式获得 b 边：

这是一个交互式示例：

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
   
let height = 50;
let width = 200;

let x = 20;
let y = 20;
let rotation = 45;
let radius = 30;
let angle;
let missingSide;

function draw() {
  document.getElementById("sliderLabel").innerText = "rotation: " + rotation + "°";
  angle = 180 - 90 - rotation / 2;
  missingSide = (height / Math.sin(angle * Math.PI / 180)) * Math.sin((rotation / 2) * Math.PI / 180);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x + width - missingSide, x + height, radius, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.save();
  ctx.fillStyle = 'grey';
  ctx.translate(x, y);
  ctx.fillRect(0, 0, width, height);
  ctx.translate(width, 0);
  ctx.rotate(rotation * Math.PI / 180);
  ctx.fillRect(0, 0, width, height);
  ctx.restore();
}
draw();

document.getElementById("slider").addEventListener("input", function(e) {
  rotation = parseInt(e.target.value);
  draw();
})

<div>
  <input type="range" min="0" max="90" value="45" id="slider">
  <label for="slider" id="sliderLabel">Volume</label>
</div><br>
<canvas id="canvas" width=440 height=250></canvas>

如何找到2个矩形的交点？

How to find intersecting point of 2 rectangles?

geometry

canvas

html5-canvas