检查圆和路径（画布）之间的碰撞

Question

我需要查看圆圈的一部分是否触及特定路径。路径的宽度也为 20。 目前，我正在创建一个半径为 20 的每 4 个路径像素的圆，并检查这些圆中是否有任何一个与其他圆接触，但这是一场性能噩梦，我确信有更好的方法来做到这一点。

Answer 1

我没有使用你的号码，因为你没有发布任何代码。 为了检测 2 个圆之间的碰撞，您需要检查 2 个圆之间的距离是否为 <= R + r + lineWidth。在这种情况下，我使用了一个非常宽的半透明笔划，因为通过这种方式，您可以看到笔划是如何覆盖圆的：一半在里面，一半在外面。

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

let cw = canvas.width = 300;
  
let ch = canvas.height = 300;

let c = {}
c.x = cw / 2;
c.y = ch / 2;

let R = 50;
let r = 20;
let lineWidth = 30;
let m = {x:-100,y:-100}

ctx.fillStyle = "#d9d9d9";
ctx.strokeStyle = "rgba(255,0,0,.5)"
ctx.lineWidth = 30;

// main circle
drawCircle(c.x,c.y,R);


canvas.addEventListener("mousemove",(evt)=>{
  ctx.clearRect(0,0,cw,ch)
  m = oMousePos(canvas, evt);
  drawCircle(c.x,c.y,R);
  drawCircle(m.x,m.y,r);
  
  if(dist(c, m) <= R + r + lineWidth){output.innerHTML = "collision"}else{output.innerHTML = ""}
});


function drawCircle(cx,cy,r){
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,2*Math.PI);
  ctx.fill();
  ctx.stroke();
}


function dist(p1, p2) {
  let dx = p2.x - p1.x;
  let dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}


function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}

canvas {
  border:1px solid #d9d9d9;
  margin:0 auto;
}
p{min-height:1.5em;}

<p id="output"></p>
<canvas id="canvas"></canvas>