2012-12-07 3 views
4

나는 paper.js에서 교차로, 차이점 및 합집합을 기반으로 새 경로를 만들어야하는 프로젝트에서 작업하고 있습니다. 좀 파고 cubic bezier spline을 보간하는 수학 함수를 찾았지만 svg와 같은 벡터 산술을 수행하는 자바 스크립트 라이브러리가 있는지 궁금합니다. 어떤 것이 든, 나는 inkscape를 복사하여 자바 스크립트로 변환 하겠지만 결코 알 수 없다. 다음 어쨌든, 베지 큐빅 보간에 대한 수학 함수이다 :paper.js 노동 조합의 차이점과 교차점

Pointx = (Ax * percent^3) + (Bx * 3 * (percent^2 * (1-percent))) + (Cx * 3 * (percent * (1-percent)^2)) + (Dx * (1-percent)^3) 
Pointy = (Ay * percent^3) + (By * 3 * (percent^2 * (1-percent))) + (Cy * 3 * (percent * (1-percent)^2)) + (Dy * (1-percent)^3) 

하는 A, B, C 및 D는 곡선 지점 어디. A는 시작이고 D는 끝이고 B와 C는 A와 D 사이의 곡률을 조작하는 "제어점"입니다. percent은 0에서 1까지의 눈금에서 계산할 거리의 한 점입니다.

제공된 베 지어의 점과 베 지어의 백분율을 반환하는 보간 함수를 사용하면 매우 간단합니다. 역 (inverse) 찾기 - 주어진 점 (또는 x 값 또는 y 값)에 대한 백분율은 어려울 것입니다. 또는 두 개의 베 지어가 교차하는 곳에서 더 어렵습니다 (저는 수학에별로 좋지 않습니다). 그것이 inkscape의 기능이 제공하는 것입니다.

이러한 종류의 벡터 보간을 빠르게 수행 할 수있는 자바 스크립트 라이브러리가 있습니까? 그렇지 않다면 여기에 올 알고리즘을 게시 할 것입니다. 감사합니다.

답변

1

이 질문이 중복 된 질문이라고 말하기는 힘들지만 나는이 질문에 대한 답변에서 위대한 통찰력을 발견 할 것이라고 생각합니다. 매우 비슷하기 때문에 question입니다.

내가 여기 그 질문에 대한 답변 사이에 언급되지 않은 다른 한 자원을 발견했다 : http://13thparallel.com/archive/bezier-curves/

다른 그 질문에 언급 된 최고의 자원이 여기에 있다는 것보다 : http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

모두 이러한 리소스는 사용자가 찾고있는 것을 수행 할 특정 기능을 자세히 설명합니다. 코드가 "라이브러리"는 아니지만 코드는 프로젝트 목적으로 쉽게 포팅됩니다. 당신이 찾고있는 무엇

+0

슬프게도, 그 링크는 라인을 렌더링하기위한 것입니다. 이 함수는 링크 중 하나에서 보여지는 것처럼 일정한 간격으로 렌더링하지 않습니다 : [link] (http://13thparallel.com/archive/bezier-curves/example3.htm) 내가 정말로 원하는 것은, 그것들이 교차하는 지점. 나는 곧 나의 발견들로 업데이트 할 것이다. –

2

는 Paper.js 지금 상당히 좋은 BoolOps을 사용하는 것하고는 베 지어 곡선과 직접 거래 Boolean Operations on Polygons

라고 무언가이다. 당신이 저에게 묻는다면 이것은 첫 번째 선택이되어야합니다. 멋진 example입니다.

또 다른 시나리오에서는 De-Casteljau algorithm을 사용하여 모양을 폴리곤 화하고 Javascript Clipper에 입력 할 수 있습니다. 높은 샘플링을 사용하면 시각적 인 결과는 실제 곡선과 동일하지만 경로의 매력적인 특성을 잃게됩니다.