Обнаруживать, если пользователь нажимает внутри круга

Как я могу обнаружить, когда пользователь нажимает на красный пузырь?

Это не должно быть как квадратное поле. Мышь должна быть действительно внутри круга:

Здесь код:

<canvas id="canvas" width="1000" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

var w = canvas.width
var h = canvas.height

var bubble = {
  x: w / 2,
  y: h / 2,
  r: 30,
}

window.onmousedown = function(e) {
    x = e.pageX - canvas.getBoundingClientRect().left
    y = e.pageY - canvas.getBoundingClientRect().top

    if (MOUSE IS INSIDE BUBBLE) {
        alert("HELLO!")
    }
}

ctx.beginPath()
ctx.fillStyle = "red"
ctx.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI*2, false)
ctx.fill()
ctx.closePath()
</script>

Ответ 1

Круг, является геометрическим положением всех точек, расстояние от центральной точки которых равно некоторому числу "R".

Вы хотите найти точки, расстояние которых меньше или равно тому, что "R", наш радиус.

Уравнение расстояния в 2d-евклидовом пространстве d(p1,p2) = root((p1.x-p2.x)^2 + (p1.y-p2.y)^2).

Убедитесь, что расстояние между вашим p и центром круга меньше радиуса.

Скажем, у меня есть круг с радиусом r и центр в позиции (x0,y0) и точка (x1,y1), и я хочу проверить, находится ли эта точка в круге или нет.

Мне нужно было бы проверить, соответствует ли d((x0,y0),(x1,y1)) < r:

Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r

В JavaScript.

Теперь вы знаете, что все эти значения (x0,y0) равны bubble.x и bubble.y и (x1,y1) как x и y.

Ответ 2

Чтобы проверить, находится ли точка внутри круга, вы хотите определить, меньше ли расстояние между данной точкой и центром круга, чем радиус круга.

Вместо использования формулы расстояния по точкам, которая предполагает использование (медленного) квадратного корня, вы можете сравнить не квадратичное (или все еще квадратное) расстояние между точками. Если это расстояние меньше квадрата радиуса, тогда вы находитесь!

// x,y is the point to test
// cx, cy is circle center, and radius is circle radius
function pointInCircle(x, y, cx, cy, radius) {
  var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
  return distancesquared <= radius * radius;
}

(Не используйте ваш код, потому что я хочу сохранить функцию вообще для зрителей, которые приходят к этому вопросу позже)

Это немного сложнее понять, но также и быстрее, и если вы намереваетесь всегда проверять "точка-в-круге" в цикле перемещения чертежа/анимации/объекта, тогда вы захотите сделать это самым быстрым способом.

Связанный тест JS perf:

http://jsperf.com/no-square-root

Ответ 3

Просто вычислите расстояние между указателем мыши и центром вашего круга, а затем решите, внутри ли он:

var dx = x - bubble.x,
dy = y - bubble.y,
dist = Math.sqrt(dx * dx + dy * dy);

if (dist < bubble.r) {
  alert('hello');
}

Демо

Как упомянутый в комментариях, для устранения Math.sqrt() вы можете использовать:

var distsq = dx * dx + dy * dy,
rsq = bubble.r * bubble.r;

if (distsq < rsq) {
   alert('HELLO');
}

Ответ 4

Альтернатива (не всегда полезный смысл будет работать только для последнего пути (re), но я предлагаю его как вариант):

x = e.pageX - canvas.getBoundingClientRect().left
y = e.pageY - canvas.getBoundingClientRect().top

if (ctx.isPointInPath(x, y)) {
    alert("HELLO!")
}

Путь может кстати. быть любой формой.

Подробнее:
http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath