2012-03-14 1 views
6

제어점을 통한 수식 곡선에 관한 질문이 있습니다. 아시다시피, HTML Canvas는 quadraticCurveTo(x1, y1, x2, y2)이고 x1 and x2은 제어점입니다.설명 - 제어점을 따라 곡선을 그리는 수식

그러나 스트로크를 사용하여 스트로크를 그릴 때 스트로크는 제어점을 절대 터치하지 않습니다.

x1 = xt * 2 - (x0 + x2)/2; 
y1 = yt * 2 - (y0 + y2)/2; 

(xt, yt) 당신을 통해 곡선하려는 지점을 = :

그래서 우리는이 공식이있다. 그 점에서 90도 직각이므로 접선은 t입니다.

제어점 위치를 다시 계산합니다.

나는 책에서이 공식을 얻었다. 그러나이 책은 그것이 어떻게 유도되었는지 설명하지 못했다. 나는 헛되이 구글을 시도했다.

누구나이 공식이 어떻게 유도되는지 알고 있습니까?

감사합니다. Venn.

+0

이것은 http://stackoverflow.com/questions/6711707/draw-a-quadratic-bezier-curvethrough-through-three-give에서 가져 왔습니다. 아무도 궁금해하는 사람들을위한 n 포인트 – mowwwalker

답변

2

차 베 지어 곡선은 수학 식에 의해 설명된다 :

x(t) = x0 * (1-t)^2 + 2 * x1 * t * (1 - t) + x2 * t^2 (Y와 유사한 (t)).

우리가 매개 변수 값 t을 적용하면 = 1/2 (어떤 방법 - 곡선의 중간), 우리는 수식 얻을 것이다 : 다음

x(t=1/2) = xt = x0 * 1/4 + 2 * x1 * 1/4 + x2 * 1/4

x1/2 = xt - (x0 + x2)/4

x1 = 2 * xt - (x0 + x2)/2

+0

도움을 주셔서 감사합니다! 이것은 위대합니다. – Vennsoh

0

Spline이라고합니다. 더 중요한 것은 Bezier Curve을 사용하고있는 것 같습니다.

+0

고마워,하지만 난 아직 이해가 안돼. x1 = xt * 2 - (x0 + x2)/2; y1 = yt * 2- (y0 + y2)/2; 파생되고있다. – Vennsoh

+0

@ Vennsoh : 내 대답을 편집했는데, 그들은 2 차 베 지어 곡선을 사용하고 있다고 생각합니다. 링크 된 위키 문서의 파생을 참조하십시오. – mindvirus