表示圆内的点位置作为任意段的百分比

时间:2012-01-06 15:18:00

标签: javascript math canvas trigonometry

好的,所以......这就是我要做的事情。在HTML / JS中。有数学知识会使一个十二岁的孩子难堪。

用一个页面上的20个复选框,用户选择其中五个。然后在页面上出现一个圆圈(我预计会使用像拉斐尔这样的画布库之一),并在它周围排列五个答案。所以这是我不知道该怎么做的第一件事;将一个圆分成x个相等的段。奇怪的,像“cos”和“sin”这样的外国术语即将出现。

然后它变得更有趣:用户可以点击圆圈上的一个点。并且这一点被转换为每个细分的某种百分比值。因此,如果用户检查Happy,Grumpy,Sneezy,Dopey和Bashful,并点击圈子,我可以告诉他们他们37%快乐,42%Dopey和21%Sneezy。

最好的比喻可能是颜色选择器轮,但我找不到任何可以重新调整的JS。一张饼图很接近 - 而且有一个很好的拉斐尔演示 - 但我有一种感觉,饼图片段的固定边界会让我沿着错误的路线估算整个圈内的百分比位置。 / p>

所以,考虑到我的模糊和经过深思熟虑的请求,以及明显没有任何“这就是我迄今为止尝试过的”代码 - 因为除了高中三角学以外,我没有最模糊的地方开始书籍,任何人都可以建议任何可能让我至少指向正确方向的代码库或片段吗?

谢谢:)

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

编辑: 哇,谢谢你的所有答案。我会尝试稍微改进一下这个问题:

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

这是我坚持的第一点:我认为我可以画一个圆圈,尺寸和我自己选择的页面上的位置(使用Raphael或类似的画布库),但我怎么能计算出什么这些点的x / y像素坐标应该在圆周上?

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

实际上,这已经开始有意义了。我仍然不确定三角形的东西是如何工作的,但输入你的问题是很奇怪的,以便陌生人能够理解它可以帮助你理解...

1 个答案:

答案 0 :(得分:0)

您需要修改您的问题,以更清楚地解释您要做的事情。在此期间,我可以为您提供以下可能有助于您入门的信息。

首先,您需要知道用户选择的五个复选框的位置。为了做到这一点,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度)

让我们更多地了解您正在做的事情,我们可以为您提供更具体的信息。