проверка на столкновение между кругом и траекторией (холст) - PullRequest
Новая
       8

проверка на столкновение между кругом и траекторией (холст)

0 голосов
/ 05 ноября 2018

Мне нужно посмотреть, касается ли часть круга определенного пути. Путь также имеет ширину 20. В настоящее время я создаю круг с радиусом 20 каждые 4 пикселя пути и проверяю, касается ли какой-либо из этих кругов других кругов, но это кошмар производительности, и я уверен, что есть лучший способ сделать это.

1 Ответ

0 голосов
/ 05 ноября 2018

Я не использую ваши номера, потому что вы не публикуете код. Чтобы обнаружить столкновение между двумя кругами, вам нужно проверить, равно ли расстояние между двумя кругами <= 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>
...