html5 캔버스 라인을 원으로 바꿉니다.

Question

사각형을 그려야합니다. 그 사각형의 어느 한면을 드래그하면 첫 번째 이미지에 표시된 것처럼 사각형의 변이 원으로 바뀌면됩니다.
2 차 곡선을 사용하여 직사각형/정사각형을 그릴 수있었습니다. 그러나 문제는 사각형의 측면을 늘일 때 원으로 늘어나지 않고 두 번째 이미지에 표시된 것과 같이 elipse 또는 무언가처럼 늘어나는 문제입니다.
베 지어 곡선을 사용하는 것이 좋습니다.하지만 Quadratic Curve와 같은 단일 제어점을 원하지만 베 지어는 두 가지를가집니다.

이 문제에 대한 최선의 방법을 제안 해주십시오.

이미지 - 내가 달성 한 것을

내가 무슨 짓을
01 - 나는

이미지 무엇을 원이 내 fiddle은 내 작업 결과를 표시합니다.
직사각형을 그리려면 캔버스에 maouse를 클릭하고 드래그하십시오.

Here is the code

Answer 1

높은 베 지어 곡선이 필요 제어점의 순서. 2 차 곡선은 2 차 베 지어 곡선이며 단일 제어점이 필요합니다. 두 개의 제어점이있는 베 지어 곡선은 3 차입니다. 순서 1의 베 지어 곡선은 실제로 직선입니다. 베 지어 곡선의 유한 순서는 완벽한 원호를 만들 수 없습니다.

그건 그렇고, 2 차 곡선은 "엘보 (elipse) 또는 무언가"가 아니라 포물선 세그먼트입니다.

원호를 원한다면 ... 원호를 사용해야합니다! 그것을 제어하려면 반경을 변경해야합니다. 실제로 원의 중심을 이동하여 반경을 변경할 수 있습니다.

원호가 결코 직선이 아니므로 직선을 처리하는 추가 논리가 필요합니다. 따라서 드래그 포인트가 직선 위에 있으면 선을 그립니다. 그렇지 않으면 적절한 반경으로 호를 그립니다.

자, 당신은 다음과 같은 상황을 가정 해 봅시다 :

세그먼트 ab이 사각형의 직선

및 acb 원하는 아크입니다. y은 세그먼트의 높이이고 x은 드래그의 수평 오프셋입니다. 우리는 r 세 점 a, c 및 b에 의해 정의 된 원의 반지름을 찾고 있습니다.

지금 각도 sda는 턴/4, sd이 r - x 및 ad이 y/2 임.우리는 피타고라스를 사용하는 경우 '우리가 얻을 : x이 0 인 경우

r^2 = (r-x)^2 + (y/2)^2 
=> 
r^2 = (r-x)(r-x) + (y/2)^2 
=> 
r^2 = r^2 - 2rx + x^2 + (y/2)^2 
=> 
r^2 = r^2 - 2rx + x^2 + (y^2/4) 
=> 
0 = - 2rx + x^2 + (y^2/4) 
=> 
2rx = x^2 + (y^2/4) 
=> 
r = (x^2 + (y^2/4))/2x 
=> 
r = ((x^2)/2x) + ((y^2/4)/2x) 
=> 
r = (x/2) + ((y^2/4)/2x) 
=> 
r = (x/2) + (y^2/8x) 

당신이 볼 수 있듯이, 우리는 당신이 그렇게되면 직선 그리기로 전환해야 할 이유 즉, 0으로 나누기가 있습니다.

발견 된 수식 (r = (x/2) + (y^2/8x))을 사용하면 호를 그릴 원의 반지름을 결정할 수 있습니다. 중심점을 찾는 것은 쉬운 일이 아닙니다 ...

사인 법칙이나 코사인 법칙을 사용할 수있는 각도를 찾으려면 둘 다 잘 작동합니다. 각도를 찾으려면 asb 삼각형, 삼각형 asd 또는 삼각형 adc (녹색)을 선택하십시오. 간단한 방법에 대한

가의 삼각형 asd을 계속하고,의는 사인의 법률 사용할 수 있도록하자 분기 턴 1의 사인 때문에

r/sin(turn/4) = (y/2)/sin(θ/2) 

을, 우리는 그것을 대체 할 수

=> 
r/1 = (y/2)/sin(θ/2) 
=> 
1 = (y/2)/sin(θ/2) 

자, 각도 그것을 해결 :

=> 
sin(θ/2) = (y/2) 
=> 
θ/2 = asin(y/2) 

는 AR을 그리는 함수를 호출 할 때 c 일 때, 시작 각도는 -θ/2이고 끝 각도는 θ/2가 될 것입니다.

참고 :이 모든 것은 사각형의 오른쪽에 대해 만들어졌으며 다른면에는 조정이 필요합니다.