Html 检测用户是否在圆圈内点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16792841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if user clicks inside a circle
提问by super
How can I detect when the user clicks inside the red bubble?
如何检测用户何时在红色气泡内单击？
It should not be like a square field. The mouse must be really inside the circle:
它不应该像一个方形的领域。鼠标必须真的在圆圈内：
Here's the code:
这是代码：
<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>
回答by Benjamin Gruenbaum
A circle, is the geometric position of all the points whose distance from a central point is equal to some number "R".
圆，是与中心点的距离等于某个数字“R”的所有点的几何位置。
You want to find the points whose distance is less than or equal to that "R", our radius.
你想找到距离小于或等于“R”的点，我们的半径。
The distance equation in 2d euclidean space is d(p1,p2) = root((p1.x-p2.x)^2 + (p1.y-p2.y)^2).
二维欧几里得空间中的距离方程为d(p1,p2) = root((p1.x-p2.x)^2 + (p1.y-p2.y)^2)。
Check if the distance between your pand the center of the circle is less than the radius.
检查您p和圆心之间的距离是否小于半径。
Let's say I have a circle with radius rand center at position (x0,y0)and a point (x1,y1)and I want to check if that point is in the circle or not.
假设我有一个半径r和中心位于位置(x0,y0)和点的圆，(x1,y1)我想检查该点是否在圆内。
I'd need to check if d((x0,y0),(x1,y1)) < rwhich translates to:
我需要检查d((x0,y0),(x1,y1)) < r哪个翻译为：
Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r
In JavaScript.
在 JavaScript 中。
Now you know all these values (x0,y0)being bubble.xand bubble.yand (x1,y1)being xand y.
现在您知道所有这些值(x0,y0)是bubble.x和bubble.y和(x1,y1)是x和y。
回答by Simon Sarris
To test if a point is within a circle, you want to determine if the distance between the given point and the center of the circle is smallerthan the radius of the circle.
要测试点是否在圆内，您需要确定给定点与圆心之间的距离是否小于圆的半径。
Instead of using the point-distance formula, which involves the use of a (slow) square root, you can compare the non-square-rooted (or still-squared) distance between the points. If that distance is less than the radius squared, then you're in!
您可以比较点之间的非平方根（或仍然平方）距离，而不是使用涉及使用（慢）平方根的点距离公式。如果该距离小于半径平方，那么您就在！
// 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;
}
(Not using your code because I want to keep the function general for onlookers who come to this question later)
（不使用您的代码，因为我想为以后遇到此问题的旁观者保留通用功能）
This is slightly more complicated to comprehend, but its also faster, and if you intend on ever checking point-in-circle in a drawing/animation/object moving loop, then you'll want to do it the fastest way possible.
这有点难以理解，但也更快，如果您打算在绘图/动画/对象移动循环中检查圆内点，那么您将希望以最快的方式进行。
Related JS perf test:
相关JS性能测试：
回答by Ja?ck
Just calculate the distancebetween the mouse pointer and the center of your circle, then decide whether it's inside:
只需计算鼠标指针和圆心之间的距离，然后确定它是否在里面：
var dx = x - bubble.x,
dy = y - bubble.y,
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < bubble.r) {
alert('hello');
}
As mentionedin the comments, to eliminate Math.sqrt()you can use:
正如所提到的意见，消除Math.sqrt()您可以使用：
var distsq = dx * dx + dy * dy,
rsq = bubble.r * bubble.r;
if (distsq < rsq) {
alert('HELLO');
}
回答by Ja?ck
An alternative (not always useful meaning it will only work for the last path (re)defined, but I bring it up as an option):
另一种选择（并不总是有用的，这意味着它只适用于（重新）定义的最后一条路径，但我将其作为一个选项提出）：
x = e.pageX - canvas.getBoundingClientRect().left
y = e.pageY - canvas.getBoundingClientRect().top
if (ctx.isPointInPath(x, y)) {
alert("HELLO!")
}
Path can btw. be any shape.
路径可以顺便说一句。是任何形状。
For more details:
http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath
更多详情：http:
//www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath
