如何确定 JavaScript 中 canvas 上绘制的两个圆之间的最短距离？

Question

我想找到任何位置的任何圆圈的粉红色圆圈与项目的黄色圆圈之间的最短距离，但我不知道该怎么做。如果您有正方形的解决方案，我想听听。我看到你可以找到不同正方形角点之间的距离，但那个距离并不总能告诉你两个正方形之间的最短距离。这是我的代码：

//Función que se asegura de ejecutar el código cuando toda la página ha cargado:
window.addEventListener('load',()=>{
    // Consiguiendo el nodo que representa el elemento <canvas>
    var canvas = document.getElementById('lienzo');
    //  Código que consigue el contexto de representación:
    var ctx = canvas.getContext('2d');
    
    
    ctx.fillStyle = 'rgb(500, 10, 1400)';

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(200, 75, 50, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.fillStyle = 'rgb(350, 220, 0)';
    ctx.beginPath();
    ctx.arc(500, 500, 50, 0, Math.PI * 2, true);
    ctx.fill();

    });

body{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #7c2515; 
}
#lienzo{ 
    border: 10px solid black; 
    width: 40%;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selección Natural</title>
    <link rel="stylesheet" href="estilo.css">
    <script src="app.js"></script>
    <link rel="shortcut icon" href="Darwin.png">
</head>
<body>
    <canvas id = "lienzo" width="800px" height="800px">Tu navegador no admite el tag canvas.</canvas>
</body>
</html>

Answer 1

如果圆相交，则最短距离为0。否则，最短距离将是两个中心之间的距离减去两个半径之和。

公式变为： C1C2 - r1 - r2。如果我给你取前两个圈，找到：

sqrt((200-75)^2 + (75-75)^2) - 50 - 50

Answer 2

您可以使用几种方法到达那里。首先，您需要将形状作为对象，以便访问 x 和 y 值。在下面的代码片段中，我为此使用了 class。

然后您需要找出两个对象的 x 坐标之间的差异和 y 坐标之间的差异。

let distX = circle1.x - circle2.x
let distY = circle1.y - circle2.y

现在您可以使用勾股定理来计算两点之间的距离。

Math.sqrt(distX*distX+distY*distY)

请记住，这是从圆心参考的，因此您需要减去每个圆的半径以确定是否重叠。

Math.sqrt(distX*distX+distY*distY) - (circle1.r + circle2.r)

现在 javascript 中有一个名为 Math.hypot 的方法可以做同样的事情

Math.hypot(distX, distY) - (circle1.r + circle2.r)

其中任何一个都可以。在下面的代码片段中，我添加了第三个圆圈，显示距离为 0。

var canvas = document.getElementById("lienzo");
var ctx = canvas.getContext("2d");

class Circle {
  constructor(x, y, r, c) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
  }
  draw() {
    ctx.beginPath();
    ctx.fillStyle = this.c;
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
let circles = [];
let circle1 = circles.push(new Circle(75, 75, 50, "rgb(500, 10, 1400)"));
let circle2 = circles.push(new Circle(200, 75, 50, "rgb(500, 10, 1400)"));
let circle3 = circles.push(new Circle(500, 400, 50, "rgb(500, 10, 1400)"));
let yellowCircle = new Circle(500, 500, 50, "rgb(350, 220, 0)");

circles.map((x) => x.draw());
yellowCircle.draw();

function distance(yellow) {
  for (let i = 0; i < circles.length; i++) {
    let distX = yellow.x - circles[i].x;
    let distY = yellow.y - circles[i].y;
    let dist = Math.hypot(distX, distY) - (yellow.r + circles[i].r); 
    //Math.hypot can be substituted for the following
    //let dist = Math.sqrt(distX*distX+distY*distY) - (yellow.r + circles[i].r); 
    console.log("The distance is "+dist)
  }
};
distance(yellowCircle);

body{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #7c2515; 
}
#lienzo{ 
    border: 10px solid black; 
    width: 40%;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selección Natural</title>
    <link rel="stylesheet" href="estilo.css">
    <script src="app.js"></script>
    <link rel="shortcut icon" href="Darwin.png">
</head>
<body>
    <canvas id = "lienzo" width="800px" height="800px">Tu navegador no admite el tag canvas.</canvas>
</body>
</html>

如何确定 JavaScript 中 canvas 上绘制的两个圆之间的最短距离？

How can I determine the shortest distance between two circles drawn on a canvas in JavaScript?

html

javascript

css

tags

canvas