문제가 있습니다. 제발 제안 해주세요. 내 문제는 : 3D 원형 차트 그리기 및 원형 차트의 한 지점으로 이동하여 이동하면 시작 지점 (12시 방향)부터 마우스를 놓을 지점까지 표시됩니다.캔버스로 3D 파이 차트를 그리는 방법과 마우스 클릭에 따라 백분율을 표시하는 방법은 무엇입니까?
몇 가지 아이디어를 주시고, 수학이 좋지 않아서 마우스가 특정 지점에서부터 마우스를 놓은 곳에서 마우스를 놓은 상태에서 마우스를 놓은 위치를 계산하는 방법을 모르십시오.
미리 감사드립니다. 나쁜 영어로 유감스럽게 생각한다면 내가하는 말을 이해하기가 어렵습니다. 다시 한 번 감사드립니다!
이전 질문이지만 재미있는 문제로 들립니다. 나는이 시점에서 2D로 고수하고있다. 3D가 필요한 경우이를 배우고 3D 공간으로 변환하는 방법을 알아내는 것으로 시작할 수 있습니다. 이는 분명히 훨씬 어렵습니다.
12시 (π/2)에서 시작하여 마우스 클릭과 정점을 이등분하는 반지름으로 끝나는 호에 의해 형성된 원형 조각의 각도를 찾고 싶습니다. 그런 다음 캔버스를 사용하여 해당 지역을 채 웁니다.
수학 -
이 직각 삼각형 구성하여이 각도를 찾기 :
사이드 1 (y)를 : 수직 클릭의 y 위치에 원의 중심 (정점)에서
측면 2 (x) : 클릭의 y 위치에서 클릭의 x 위치까지 수평으로
사이드 3 : 대각선으로
가 기억 클릭의 x 위치에 정점 (이 빨간색으로, 빗변이고, 알려진 필요가 없습니다)에서, 마우스의 위치가 계산됩니다 왼쪽 오른쪽에서 위로 아래로.
면 x의 길이가 클릭의 x 위치에서 원의 반지름을 뺀 값과 같은지 확인하십시오.
다음으로 코탄 탄젠트 (인접면/반대면)를 사용하여 π (180도)에서 뺍니다. 음영 영역의 각도를 찾습니다. 당신이 볼 수 있듯이
, 일부 사분면에 당신은 파이를 추가하며, 일부는하지 않습니다,하지만 당신은 당신의 조각의 각도를 찾는 방법 본질적이다.
또한 1/2 pi (90도)부터 시작하기 때문에 원 (1/2pi) 주위로 1/4 정도 조정해야합니다.
강령 -
그것은 jQuery 플러그인입니다 -
https://raw.github.com/thilosavage/pielighter/master/pielighter.js
원의 직경은 캔버스 요소의 크기 속성에 의해 설정된다.
즉 <canvas id='myPIe' size='400'></canvas> 은 400px 너비의 원을 만듭니다.
테두리 크기, 테두리 색 및 채우기 색을 사용자 지정할 수 있습니다.
onRelease 및 onDrag에 대한 콜백을 추가 할 수 있습니다.이 콜백은 선택한 슬라이스의 퍼센트,도 및 라디안을 전달합니다.
간단한 데모 : http://thilosavage.com/projects/pielighter/demo-simple.php
전체 데모 : http://thilosavage.com/projects/pielighter/demo-full.php