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



好吧,这就是我要做的。在HTML/JS中。数学知识会让一个12岁的孩子感到尴尬。

例如,在一个页面上有20个复选框时,用户会选择。。其中五个。然后,页面上出现了一个圆圈(我预计会使用拉斐尔这样的画布库),上面排列着他们的五个答案。所以这是我不知道该怎么做的第一件事;把一个圆分成x等分。奇怪的是,像"cos"one_answers"sin"这样的外国术语正在地平线上若隐若现。

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

最好的类比可能是一个颜色选择器轮子,但我找不到任何可以重新利用的JS轮子。饼图很接近——还有一个很好的拉斐尔演示——但我有一种感觉,饼图片段的固定边界会让我在估计整个圆圈内的百分比位置时走错路。

因此,考虑到我模糊且考虑不周的请求,以及明显没有任何"这是我迄今为止尝试过的"代码——因为除了高中的三角学书籍之外,我甚至没有最模糊的起点,有人能提出任何代码库或代码片段,让我至少指向正确的方向吗?

谢谢:)

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

编辑:哇,谢谢你的回答。我会试着完善一下这个问题:

我需要画一个圆,圆周上有x个等距排列的点。点数将与用户选中的复选框数相关联。

这是我陷入困境的第一点:我认为我可以画一个圆圈,用我自己选择的尺寸和页面上的位置(使用拉斐尔或类似的画布库),但我如何计算这些点在圆周上的x/y像素坐标?

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

事实上,这开始有意义了。我仍然不确定trig是如何工作的,但令人惊讶的是,把你的问题打出来,让陌生人理解它可以帮助你自己理解。。。

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

首先,您需要知道用户选择的五个复选框的位置。为了做到这一点,jQuery库提供了一些方便的函数,如$.position$.offset

你的问题并没有明确你想要画的圆圈相对于用户点击的五个复选框的位置。至于实际绘制圆圈,您可能希望使用类似HTML5画布元素的东西。我自己还没有用过,所以我不能告诉你太多。

你可能想试着在StackOverflow上问另一个问题,一旦你计算了圆的中心和半径,如何在网页上画一个圆。

关于圆的数学运算,你需要知道圆可以通过以下方程在x-y平面上参数化:

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

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

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

最新更新