将圆内的点位置表示为任意线段的百分比
好吧，所以...这就是我想做的。在 HTML/JS 中。拥有令十二岁孩子难堪的数学知识。
比如说，页面上有 20 个复选框，用户可以选择......其中 5 个。然后页面上会出现一个圆圈（我预计会使用 Raphael 等画布库之一），周围排列着五个答案。所以这是我不知道该怎么做的第一件事；将一个圆分成 x 个相等的线段。 “cos”和“sin”等奇怪的外国术语正在出现。
但随后它变得更加有趣：用户可以单击圆圈上的一个点。该点被转换为每个细分市场的某种百分比值。因此，如果用户选中快乐、脾气暴躁、打喷嚏、糊涂和害羞，然后单击圆圈，我可以告诉他们他们 37% 快乐、42% 糊涂和 21% 打喷嚏。
最好的类比可能是颜色选择轮，但我找不到任何可以重新利用的 JS 轮。饼图很接近 - 并且有一个很好的 Raphael 演示 - 但我有一种感觉，饼图部分的固定边界将带我走上错误的路线，以估计整个圆内的百分比位置。
因此，考虑到我的模糊且考虑不周的请求，以及明显缺乏任何“这是我迄今为止尝试过的”代码 - 因为除了高中三角学书籍之外，我什至没有最模糊的地方开始，可以有人建议任何代码库或片段可以让我至少指向正确的方向吗？
谢谢:)
==========================
编辑： 哇，谢谢你的所有答案。我将尝试细化这个问题：
我需要画一个圆，其中x个点围绕其圆周均匀排列。点数将与用户选中的复选框的数量相关。
这是我坚持的第一点：我认为我可以画一个圆，其尺寸和位置在我自己选择的页面上（使用拉斐尔或类似的画布库），但是我如何计算 x/这些点的 y 像素坐标应该在圆周上吗？
第二位：然后用户单击圆圈中的任意位置。我想我要做的是计算每个圆周点距该用户点击点有多远 - 我不知道该怎么做，除了模糊的怀疑它涉及假想三角形 - 然后是总数是多少这些距离中的每一个的距离。至少最后一点我可以做到。
事实上，这已经开始有意义了。我仍然不确定三角函数是如何工作的，但令人惊奇的是，把你的问题写出来，这样陌生人就会明白它可以帮助你自己理解......
Ok, so... here's what I'm trying to do. In HTML/JS. With a math knowledge that would embarrass a twelve-year old.
With, say, 20 checkboxes on a page, the user picks.. five of them. A circle then appears on the page (I'd anticipate using one of the canvas libraries like Raphael) with their five answers arranged around it. So that's the first thing I don't know how to do; split a circle into x equal segments. Strange, foreign terms like "cos" and "sin" are looming on the horizon.
But then it gets even more fun: the user can click a point on the circle. And that point is translated into some sort of percentage value for each of the segments. So if the user checks Happy, Grumpy, Sneezy, Dopey and Bashful, and clicks the circle, I can tell them that they're 37% Happy, 42% Dopey and 21% Sneezy.
The best analogy is probably a colour-picker wheel, but I can't find any JS ones that I could repurpose. A pie chart is close - and there's a nice Raphael demo - but I've got a feeling that the fixed boundaries of a pie chart segment is going to take me down the wrong route for estimating percentage positions within the circle as a whole.
So, given my vague and poorly thought out request, and the noticeable absence of any "here's what I've tried so far" code - because I don't have the foggiest where to even start, apart from high school trigonometry books, can anyone suggest any code libraries or snippets that might get me at least pointing in the right direction?
Thanks :)
========================
Edit :
Wow, thanks for all the answers. I'll try to refine the question/s a bit:
I'm going to need to draw a circle with x number of points arranged equally around its circumference. The number of points will correlate to the number of checkboxes that the user checked.
That's the first bit I'm stuck on: I reckon that I can draw a circle, with dimensions and at a position on the page of my own choosing, (using Raphael or similar canvas library) but how can I calculate what the x/y pixel coordinates of those points should be on the circle circumference?
The second bit: the user then clicks anywhere in the circle. I guess what I'd do is calculate how far each of the circumference points are from that user click point - I'm not sure how to do that, apart from a vague suspicion it involves imaginary triangles - and then how much of a total distance each of those distances are. That last bit, at least, I can manage.
Actually, this is starting to make sense. I'm still not sure how the trig stuff works but it's amazing what typing your problem out so that strangers will understand it can do to help your own understanding...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要修改您的问题以更清楚地解释您想要做什么。与此同时，我可以为您提供以下信息，以帮助您入门。
首先，您需要知道用户选择的五个复选框的位置。为了做到这一点，jQuery 库提供了一些方便的函数，例如
$.position和$.offset。您的问题并没有明确说明您想要绘制的圆圈相对于用户单击的五个复选框的位置如何。至于实际绘制圆圈，您可能需要使用 HTML5 canvas 元素之类的东西。我自己还没有使用过它，所以我不能告诉你太多。
您可能想尝试在 StackOverflow 上询问另一个问题，了解计算圆心和半径后如何在网页上绘制圆。
至于对圆进行数学计算，您需要知道可以通过以下方程在 xy 平面上对圆进行参数化：
其中 (x0,y0) 是圆的中心，r 是圆的半径，并且theta 的范围为 0 到 2*Pi 弧度（0 到 360 度）。
请让我们更多地了解您正在做什么，我们可以为您提供一些更具体的信息。
You need to revise your question to explain more clearly what you are trying to do. In the meantime, I can give you the following information that may help you get started.
First of all, you'll need to know the locations of the five checkboxes that the user selects. In order to do this, the jQuery library offers some convenient functions such as
$.positionand$.offset.Your question does not make clear exactly how the circle you want to draw is positioned in relation to the five checkboxes that the user clicks. As for actually drawing the circle, you may want to use something like the HTML5 canvas element. I've not yet used it myself, so I can't tell you much about it.
You might want to try asking another question on StackOverflow about how to draw a circle on your web page once you've computed the center and radius of the circle.
As for doing the math about the circle, you need to know that a circle can be parameterized on an x-y plane by the following equations:
where (x0,y0) is the center of the circle, r is the radius of the circle, and theta ranges over 0 to 2*Pi radians (0 to 360 degrees)
Let us know more about what you're doing and we can give you some more specific information.