임의 세그먼트의 백분율로 서클 내의 점 위치 표현

Question

좋아, 그럼 ... 여기 내가하려는 일이있다. HTML/JS. 12 세를 당황하게 할 수학 지식이 있습니다.

페이지에서 20 개의 체크 박스를 사용하여 사용자가 5 개를 선택합니다. 그런 다음 원이 페이지에 표시됩니다 (저는 Raphael과 같은 캔버스 라이브러리 중 하나를 사용할 것으로 예상됩니다). 이것이 내가 어떻게해야 할 지 모르는 첫 번째 것입니다; 원을 x 개의 동일한 세그먼트로 나눕니다. "cos"와 "sin"과 같은 이상하고 외적인 용어는 지평선에서 어렴풋이 나타납니다.

하지만 더 재미있어집니다. 사용자가 서클의 한 지점을 클릭 할 수 있습니다. 그리고 그 점은 각 세그먼트에 대한 일종의 백분율 값으로 변환됩니다. 따라서 사용자가 Happy, Grumpy, Sneezy, Dopey 및 Bashful을 확인하고 서클을 클릭하면 37 %의 행복, 42 %의 Dopey 및 21 %의 Sneezy라고 말할 수 있습니다.

가장 좋은 비유는 색상 선택 도구 일 가능성이 있지만 재사용 할 수있는 JS 항목을 찾을 수 없습니다. 원형 차트가 가까워서 멋진 Raphael 데모가 있습니다. 그러나 원형 차트 세그먼트의 고정 된 경계가 전체 원형 내의 백분율 순위를 추정하기위한 잘못된 경로로 나를 몰아가는 느낌이 들었습니다.

그래서 모호하고 잘못 생각한 요청과 "여기까지 시도한 코드"가 눈에 띄게 없어 졌기 때문에 - 고등학교는 따로하고 시작하는 것이 가장 힘들었 기 때문에 삼각법 서적, 누구나 적어도 올바른 방향을 가리키게 할 수있는 코드 라이브러리 나 발췌 문장을 제안 할 수 있습니까?

감사합니다 :)

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

편집 : 와우, 모든 해답을 주셔서 감사합니다. 질문을 조금 더 세밀히하려고 노력할 것입니다 :

나는 x 점이 원주 주위에 똑같이 배열 된 원을 그릴 필요가 있습니다. 포인트의 수는 사용자가 체크 한 체크 박스의 수와 관련이 있습니다.

그게 내가 붙어있는 첫 번째 비트 야. 크기와 위치를 선택하고 (Raphael 또는 비슷한 캔버스 라이브러리를 사용하여) 내 페이지의 위치에 서클을 그릴 수 있다고 생각하지만 어떻게 계산할 수 있습니까? 그 점들의 x/y 픽셀 좌표가 원 둘레에 있어야합니까?

두 번째 비트 : 사용자가 원의 아무 곳이나 클릭합니다. 내가 할 수있는 일은 원 클릭 포인트가 각각 사용자 클릭 포인트에서 얼마나 멀리 떨어져 있는지 계산하는 것입니다 .- 가상 삼각형과 관련된 막연한 의문은 따로하고, 어떻게해야하는지 잘 모르겠습니다. 거리는 각각 거리입니다. 그 마지막 비트는 적어도 관리 할 수 ​​있습니다.

실제로 이것은 의미가 있습니다. 나는 여전히 삼각법이 어떻게 작동하는지 잘 모르겠지만 낯선 사람들이 자신의 이해를 도울 수 있다는 것을 이해할 수 있도록 문제를 타이핑하는 것이 놀랍습니다. ...

Answer 1

무엇을 더 명확하게 설명하기 위해 질문을 수정해야합니까? 너는하려고하는거야. 그동안 귀하가 시작하는 데 도움이되는 다음 정보를 제공해 드릴 수 있습니다.

우선, 사용자가 선택하는 다섯 개의 확인란의 위치를 ​​알아야합니다. 이를 위해 jQuery 라이브러리는 $.position 및 $.offset과 같은 편리한 기능을 제공합니다.

귀하의 질문은 사용자가 클릭하는 다섯 개의 확인란과 관련하여 그려야 할 원이 어떻게 배치되어 있는지 정확하게 설명하지 않습니다. 실제로 원을 그릴 때 HTML5 캔버스 요소와 같은 것을 사용할 수 있습니다. 나는 아직 그것을 사용하지 않았기 때문에 그것에 대해 많이 말할 수는 없다.

원의 중심과 반경을 계산하면 웹 페이지에서 원을 그리는 방법에 대한 다른 질문을 StackOverflow에서 시도해 볼 수 있습니다.

원에 대해 계산을 수행하기위한, 당신은 원은 다음 식에 의해 xy 평면에 매개 변수화 될 수 있음을 알아야합니다 (X0, Y0가)의 중심

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

원은 반지름, r은 원의 반지름이며 쎄타 범위는 0 ~ 2 * Pi 라디안 (0 ~ 360도)

자세한 내용을 알려면 더 구체적인 정보를 제공해주십시오.