javascript - 将圆内的点位置表示为任意线段的百分比

Question

好的，所以......这就是我想要做的。在 HTML/JS 中。拥有让十二岁 child 难堪的数学知识。

比如说，一个页面上有 20 个复选框，用户可以选择其中的五个。然后页面上会出现一个圆圈(我预计会使用像 Raphael 这样的 Canvas 库之一)，并在其周围排列着他们的五个答案。所以这是我不知道该怎么做的第一件事；将一个圆分成 x 个相等的部分。像“cos”和“sin”这样的奇怪的外来术语正在出现。

但随后它变得更加有趣:用户可以单击圆圈上的一个点。并且该点被转换为每个段的某种百分比值。因此，如果用户选中 Happy、Grumpy、Sneezy、Dopey 和 Bashful，然后单击圆圈，我可以告诉他们他们是 37% Happy、42% Dopey 和 21% Sneezy。

最好的比喻可能是颜色选择器轮，但我找不到任何可以重新利用的 JS 轮。饼图很接近 - 并且有一个很好的 Raphael 演示 - 但我有一种感觉，饼图段的固定边界会让我走错路，以估计整个圆圈内的百分比位置。

因此，考虑到我模糊且深思熟虑的请求，以及明显没有任何“这是我迄今为止尝试过的”代码 - 因为除了高中三 Angular 学书籍之外，我什至不知道从哪里开始，可以有人建议任何可能让我至少指向正确方向的代码库或片段吗？

谢谢 :)

========================

编辑 :
哇，感谢所有的答案。我会尝试稍微细化一下问题:

我将需要绘制一个圆圈，其中 x 个点围绕其圆周均匀排列。点数将与用户选中的复选框数相关。

这是我坚持的第一点:我认为我可以在我自己选择的页面上绘制一个带有尺寸和位置的圆圈(使用 Raphael 或类似的 Canvas 库)但是我如何计算 x/这些点的 y 像素坐标应该在圆周上吗？

第二位:用户然后单击圆圈中的任意位置。我想我要做的是计算每个圆周点距该用户点击点的距离 - 我不知道该怎么做，除了模糊的怀疑它涉及假想三 Angular 形 - 然后总共有多少这些距离中的每一个都是距离。至少最后一点，我可以应付。

事实上，这开始变得有意义了。我仍然不确定触发的东西是如何工作的，但是把你的问题写出来让陌生人理解它可以帮助你自己的理解，这真是太神奇了......

Answer 1

您需要修改您的问题以更清楚地解释您要做什么。同时，我可以为您提供以下信息，可以帮助您入门。

首先，您需要知道用户选择的五个复选框的位置。为此，jQuery 库提供了一些方便的功能，例如 $.position和 $.offset .

您的问题没有明确说明您要绘制的圆圈相对于用户单击的五个复选框的位置。至于实际绘制圆圈，您可能需要使用 HTML5 Canvas 元素之类的东西。我自己还没有使用它，所以我不能告诉你太多。

您可能想尝试在 StackOverflow 上询问有关如何在计算圆的中心和半径后在网页上绘制圆的问题。

至于对圆进行数学运算，您需要知道可以通过以下等式在 x-y 平面上对圆进行参数化:

x = x0 + r cos(theta)
y = y0 + r sin(theta)

其中 (x0,y0) 是圆的中心，r 是圆的半径，theta 的范围是 0 到 2*Pi 弧度(0 到 360 度)

让我们更多地了解您在做什么，我们可以为您提供一些更具体的信息。