Calculate/check fill/space CSS3 圆/椭圆的坐标 JavaScript
Calculate/check fill/space coordinates of CSS3 circle / ellipse by JavaScript
我在 CSS 中定义了一个圆，或者通常是一个椭圆，例如像这样：
圆圈： border-radius: 50%; width: 50px; height: 50px;
椭圆: border-radius: 50%; width: 30px; height: 50px;
现在，如果它们是 square/rectangle，我将只使用它们的宽度和高度作为 calculate/check 坐标。然而他们不是。
所以我想做的是计算绘制的椭圆的填充坐标。
我什至不想得到所有的坐标，因为最后，我实际上只需要检查一些坐标是否也是给定椭圆的坐标。
我如何使用 JavaScript(/jQuery) 来做到这一点？
附加信息：
圆只是椭圆的特例（等宽&高）；
border-radius 始终为 50%；
不必完全精确；
这里有两个问题。
第一个，可能是你没有意识到的，或者你可能只是不关心的是使用 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)的连线是矩形三角形的斜边，两边都是(A, B) 坐标和圆心，记住两个点共享相同的坐标 space.
如果你用毕达哥拉斯定理计算这个假设：h = sqrt((A - x)^2 + (B - y)^2).
h大于r的点(A,B)在圆外，而h小于等于r的点在圈内。
现在，恢复技术点。当你在玩 CSS 时，很难用工具来表示一个 canvas，你可以在其中计算出一个真正的坐标轴。当然，您可以将您的页面视为您的 canvas，但它通常会受到外部问题的影响，例如屏幕分辨率会破坏您的计算。
我的第一个 strong 建议是切换到合适的技术，例如 SVG 或 HTML5 Canvas。然后确保你理解我在这里分配给案例或圆（最简单的）的基本几何概念，然后在互联网上搜索或在这里询问椭圆的案例。
我在 CSS 中定义了一个圆，或者通常是一个椭圆，例如像这样：
圆圈： border-radius: 50%; width: 50px; height: 50px;
椭圆: border-radius: 50%; width: 30px; height: 50px;
现在，如果它们是 square/rectangle，我将只使用它们的宽度和高度作为 calculate/check 坐标。然而他们不是。
所以我想做的是计算绘制的椭圆的填充坐标。
我什至不想得到所有的坐标，因为最后，我实际上只需要检查一些坐标是否也是给定椭圆的坐标。
我如何使用 JavaScript(/jQuery) 来做到这一点？
附加信息：
圆只是椭圆的特例（等宽&高）；
border-radius 始终为 50%；
不必完全精确；
这里有两个问题。
第一个，可能是你没有意识到的，或者你可能只是不关心的是使用 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)的连线是矩形三角形的斜边，两边都是(A, B) 坐标和圆心，记住两个点共享相同的坐标 space.
如果你用毕达哥拉斯定理计算这个假设：h = sqrt((A - x)^2 + (B - y)^2).
h大于r的点(A,B)在圆外，而h小于等于r的点在圈内。
现在，恢复技术点。当你在玩 CSS 时，很难用工具来表示一个 canvas，你可以在其中计算出一个真正的坐标轴。当然，您可以将您的页面视为您的 canvas，但它通常会受到外部问题的影响，例如屏幕分辨率会破坏您的计算。
我的第一个 strong 建议是切换到合适的技术，例如 SVG 或 HTML5 Canvas。然后确保你理解我在这里分配给案例或圆（最简单的）的基本几何概念，然后在互联网上搜索或在这里询问椭圆的案例。