javascript - 通过 JavaScript 计算/检查 CSS3 圆/椭圆的填充/空间坐标

Question

我在 CSS 中定义了一个圆，或者通常是一个椭圆，例如像这样:
圆: border-radius:50%；宽度:50px；高度:50px;
椭圆: border-radius: 50%;宽度:30px；高度:50px;

现在，如果它们是正方形/矩形，我将只使用它们的宽度和高度来计算/检查坐标。然而他们不是。

所以我想做的是计算绘制的椭圆的填充坐标。
我什至不想获取所有坐标，因为最后，我实际上只需要检查一些坐标是否也是给定椭圆的坐标还是不是。

我如何使用 JavaScript(/jQuery) 来做到这一点？

附加信息:
圆只是椭圆的特例(等宽等高)；
border-radius 始终为 50%；
它不必完全精确；

Answer 1

这里有两个问题。

第一个，您可能没有意识到，或者您可能根本不关心第一个，那就是使用 CSS 绘制形状，虽然看起来很流行，但并不是一个好方法。

这种方法有很多障碍，最值得注意的是 CSS 不是为矢量绘图开发的技术，它是一种将内容与样式分开的技术。

您拥有可以使用的强大技术，例如 SVG 或 HTML5 Canvas，它们将大大简化您的工作。

但我们将在答案的第二部分进一步深入研究:

如何检查 (A,B) 在圆心 (x, y) 和半径 r 的圆内？

好吧，首先，如果你的 (A,B) 点在包围圆的矩形之外，它将在圆之外，所以如果 A < x - r || A > x + r || B < y - r || B > y + r 您的点 (A, B) 位于包围矩形的外部。

当 (A,B) 在矩形内部时，从 (A,B) 到 (x,y) 的连线是矩形三 Angular 形的斜边，其中两边都是 (A, B) 之间的差值坐标和圆心，请记住，这两个点共享相同的坐标空间。

如果您使用毕达哥拉斯定理计算这个连用:h = sqrt((A - x)^2 + (B - y)^2)。

h 大于 r 的点 (A,B) 在圆的外部，而 h 小于或等于 r 的点在圆的内部> 圆圈的。

现在，恢复技术重点。当您在玩 CSS 时，很难用工具来表示可以计算真实坐标轴的 Canvas 。当然，您可以将页面视为 Canvas ，但它通常会受到外部问题的影响，例如屏幕分辨率会破坏您的计算。

我的第一个也是强烈的建议是改用合适的技术，例如 SVG 或 HTML5 Canvas。然后确保您理解我在这里分配给案例或圆(最简单的)的基本几何概念，然后在互联网上搜索或在这里询问椭圆的案例。