상호 연결된 곡선

Question

는 전형적 형식 JSON 좌표 일련의 주어진 :

{from: {x:0, y:0}, to: {x:0, y:10}, ...} 

I 간단한 고정 반경 둥근 접속되어 직선 점선 경로 일련 그릴 싶다. 나는 직선을 따라 점을 계산하기 위해 Slope Intercept Form을보고 있었지만 (Bezier?) 곡선을 따라 점을 계산하는 방법에 대해서는 약간 당황 스럽다.

나는 p1과 p2, p3과 p4 사이에 곡선을 그리고 싶습니다. 가난한 가상 모형이 암시하는 것에도 불구하고 나는 모퉁이가 고정 된 반경 인 것이 행복하다. 10px

내가하는 도면 로직 밖으로 추상적 때문에 그때 (여러 가지 방법으로 렌더링 할 수 따라서 내가 어떤 붙박이을 사용 방지하고 자바 스크립트 포인트 배열을 반환에 대한 일반화 된 접근 방식을 추구하고 싶습니다 SVG, Canvas 등에서 제공하는 기능).

Answer 1

원하는 것은 입방 형 베 지어 커브입니다. 이 페이지의 첫 번째 애플릿에서

http://www.blackpawn.com/texts/splines/

봐. A가 p1이고 D가 p2이고 AB 방향이 라인 1의 각도이고 CD 방향이 라인 2의 각도라면 이것이 필요한 속성을 나타내는 방식을 볼 수 있습니다. 각도 1에서 시작하여 각도 2에서 끝나고 포인트.

그래서 포인트 C와 D를 얻으려면 한 가지 방법은 선분 1을 복사하고 복사 한 다음 p1에서 시작하여 새 행의 끝이 B라고 말합니다. 라인 세그먼트 2와 p2를 D로 설정합니다. (복사 된 선분의 거리를 곱해서 커브가 어느 정도 튀어 나오게하는 등의 작업을 할 수 있습니다.)

당신이 곡선에 대한 귀하의 방정식을 일단 :

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves

그리고 원하는 정밀에서의 델타 t으로 단계별로 n (예를 들어. t = 0.01, 매 0.01 ...)마다 곡선의 모든 점 쌍을 선분으로 뱉어 낸다.