如何检查我的鼠标坐标是否悬停在椭圆形上？答案

【问题标题】：How do I check if my mouse coordinates hover over an ellipse shape?如何检查我的鼠标坐标是否悬停在椭圆形上？
【发布时间】：2020-11-25 23:39:49
【问题描述】：

这个问题与输出无关，但为了简单起见，我们将把问题留给 HTML 画布。我有一个椭圆形/椭圆形，当您将鼠标悬停在它上面时，我想突出显示它。在我使用此问题 (mouseover circle HTML5 canvas) 中描述的一段代码之前。

伪代码；


const circle = { x: 10, y:10, radius:5 };
const distanceBetween: (point1, point2) => {
    var a = point1.x - point2.x;
    var b = point1.y - point2.y;
    return  Math.sqrt( a*a + b*b );
}

var radius = distanceBetween({x: mouse.x, y: mouse.x}, {x: circle.x, circle.y});

// If radius is below 5, mouse is on top of the circle.

但是因为这个椭圆形的 x 和 y 的半径不同。仅使用半径是不够的。我一直在尝试通过分别使用 x 半径和 y 半径来隔离问题。但我就是找不到解决问题的缺失链接。

var ellipse = {cx: 10, cy:10, rx: 5, ry:10}

我需要什么样的公式来检查我的鼠标 x/y 坐标是否悬停在椭圆上？

【问题讨论】：

所以你有椭圆中心和关于椭圆的其他信息？
我有椭圆的 x,y 坐标。加上 x 半径和 y 半径。椭圆对象看起来像 SVG 元素。
使用这个公式math.stackexchange.com/questions/76457/…。

标签： javascript canvas html5-canvas 2d drawing

【解决方案1】：

var ellipse = {cx: 10, cy:10, rx: 5, ry:10}
var distance = Math.pow(mouse.x - ellipse.cx, 2) / Math.pow(ellipse.rx, 2) + Math.pow(mouse.y - ellipse.cy,2) / Math.pow(ellipse.ry,2);

// distance < 1 is everything within the ellipse.
// distance > 1 is everything outside the ellipse.

来源：https://math.stackexchange.com/a/76463/545328

谢谢@Berto99

【讨论】：