Question

我需要查看圆的一部分是否触及某个路径。该路径的宽度也为20。目前，我正在创建路径的半径为每4个像素的半径为20的圆，并检查这些圆中是否有一个与其他圆接触，但这是性能方面的噩梦，我敢肯定有更好的方法可以做到这一点。

Answer 1

我没有使用您的电话号码，因为您没有发布任何代码。为了检测2个圆之间的碰撞，您需要检查2个圆之间的距离是否为import asyncio import threading def taskA(lst, evt): print(f'Appending 1') lst.append(1) evt.set() async def taskB(lst, evt): asyncio.get_event_loop().run_in_executor(None, evt.wait) print('Retrieved:', lst.pop()) def targetA(lst, evt): taskA(lst, evt) def targetB(lst, evt): asyncio.set_event_loop(asyncio.new_event_loop()) asyncio.get_event_loop().run_until_complete(taskB(lst, evt)) lst = [] evt = threading.Event() threadA = threading.Thread(target=targetA, args=(lst, evt)) threadB = threading.Thread(target=targetB, args=(lst, evt)) threadA.start() threadB.start() threadA.join() threadB.join()。在这种情况下，我使用的是非常宽的半透明笔触，因为这样一来，您可能会看到笔触如何放置在圆上：内侧一半在外侧。

<= 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;}

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

1 个答案: