如何检测用户何时点击红色气泡?
它不应该像一个方形场。鼠标必须在圆圈内:
以下是代码:
<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>
答案 0 :(得分:52)
圆圈,是距离中心点的距离等于某个数字“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
。
答案 1 :(得分:32)
要测试某个点是否在圆内,您需要确定给定点与圆心之间的距离是否小于圆的半径。
您可以比较点之间的非平方根(或静止平方)距离,而不是使用包含(慢)平方根的点距离公式。如果该距离小于半径平方,那么你就在!
// 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性能测试:
答案 2 :(得分:5)
只需计算鼠标指针和圆圈中心之间的distance,然后判断它是否在内部:
var dx = x - bubble.x,
dy = y - bubble.y,
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < bubble.r) {
alert('hello');
}
在评论中作为mentioned,要消除Math.sqrt()
,您可以使用:
var distsq = dx * dx + dy * dy,
rsq = bubble.r * bubble.r;
if (distsq < rsq) {
alert('HELLO');
}
答案 3 :(得分:3)
另一种选择(并不总是有用意味着它只适用于最后一条路径(重新)定义,但我将其作为一个选项提出):
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