2013-03-13 3 views
4

제어점이 2 개인 3 차 베 지어가 있습니다. 시작점과 제어점을 알고 있습니다. 컨트롤, 시작 및 종료 지점이 주어지면 커브의 모든 지점을 가져올 필요가 있습니다. 달성하고자하는 것은 .. 1에서 곡선 길이까지의 값이 주어진다 .. 그 위치에있는 각 점의 X와 Y 및 알파 (각도)를 얻는다. 좋은 참조 또는 작업 코드를 찾을 수 없습니다. 자바 스크립트를 사용하고 있습니다.자바 스크립트에서 큐빅 베 지어 곡선의 모든 점을 찾습니다.

+0

봐있다 : http://stackoverflow.com/questions/4089443/find-the-tangent-of-a-point-on-a-cubic-bezier-curve-on-an-iphone – XDnl

답변

15

정확하게 이해했다면, 모든 지점에서 베 지어의 위치와 기울기 (곡선에 접함)를 결정하려고합니다.

시작점이 (ax, ay)이고 끝점이 (dx, dy)이고 제어점이 (bx, by) 및 (cx, cy)라고 가정 해 봅시다.

위치는 쉽습니다. 먼저 혼합 함수를 계산하십시오. 이것들은 커브상의 제어점의 "효과"를 제어합니다.

B0_t = (1-t)^3 
B1_t = 3 * t * (1-t)^2 
B2_t = 3 * t^2 * (1-t) 
B3_t = t^3 

t가 0이고 그 밖의 모든 값이 0 인 경우 B0_t가 1임을 알 수 있습니다. 또한, t가 1 일 때 B3_t는 1입니다 (그 외 모든 것은 0 임). 따라서 곡선은 (ax, ay)에서 시작하고 (dx, dy)에서 끝납니다.

중간 점 (px_t, py_t)는 (루프 내측의 작은 단위로, 0에서 1로 변할 t)는 다음에서 설명한다 :

px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx) 
py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy) 

경사도 쉽게 할 수있다.

B0_dt = -3(1-t)^2 
B1_dt = 3(1-t)^2 -6t(1-t) 
B2_dt = - 3t^2 + 6t(1-t) 
B3_dt = 3t^2 

https://stackoverflow.com/a/4091430/1384030에 주어진 방법을 사용 그래서, x와 y의 변화율은 다음과 같습니다 : 다음

px_dt = (B0_dt * ax) + (B1_dt * bx) + (B2_dt * cx) + (B3_dt * dx) 
py_dt = (B0_dt * ay) + (B1_dt * by) + (B2_dt * cy) + (B3_dt * dy) 

그리고 (라디안) 각도를 얻을 수 Math.atan2(py_dt,px_dt)를 사용합니다.

4

De Casteljau algorithm은 수치 적으로 안정적입니다. 여기에는 점을 계산하기 직전 단계 인 탄젠트 선 (따라서 접선 각도)을 계산하는 추가 이점이 있습니다.

그러나 매개 변수 값에 따라 작동하지만 길이는이 아닙니다. 커브 렌더링의 일부로 값이 아닌 매개 변수별로 점을 계산하는 것이 바람직합니다. 매개 변수의 범위는 시작에 해당하는 [0 ... 1], 0이고 커브의 끝점은 1입니다.

+2

예, 세 가지 장점이 있습니다. * 수정없이 스플라인의 모든 각도에서 작동합니다. * 전원 기능이 필요하지 않습니다. * 그리고 가장 중요한 것은 결과에 매개 변수 't'에 대한 접선과 점이 있기 때문에 계산식이 계산적으로 더 간단해야하는 경우입니다. – divanov