베 지어 큐브 커브 및 마커 (화살표 헤드)

Question

저는 svg에 대해 상당히 새롭고 패치 및 베 지어 큐빅 곡선에 대한 작업을 수행해야합니다.

나는 N 개의 (아마도 수천) 경로 (베 지어 큐빅 곡선)가있는 svg가 있습니다. 각 라인/경로에는 마커를 사용하여 화살촉이 표시된 방향이 있습니다. 여기에 예제가 있습니다. 당신이에 대한 HTML을 보면

http://jsfiddle.net/v1sw8vhd/1/

, 당신은 마커 (UpArrowPrecise 및 DownArrowPrecise)이 화살표 머리를 만드는 동양 = "270"동양 = "90"을 사용하여 N도 회전 것을 볼 수 있습니다 나는 그들이 필요로하는 방향으로 어느 정도를 가리킨다.

<marker id="DownArrowPrecise" markerWidth="10" markerHeight="20" refX="5" refY="10" orient="90" > 
     <path d="M0,20 L10,20 L5,0 Z" /> 
    </marker> 

직선의 경우 마커에서 orient = "auto"로 처리하는 것이 좋습니다. 그러나 나는 베 지어 큐브 곡선의 경우에 뭔가 빠졌습니다.

나는 기울기를 계산할 수있는 자바 스크립트 함수를 작성하고 각 경로/선의 x 축과 관련된 각도를 계산할 수 있으며 거기에서 적절한 "방향"값으로 마커를 만들 수 있습니다. 그러나 이것은 매우 헤비급/잔인한 것 같습니다. 각 라인 (아마도 수천)에 대한 계산을 수행하고 적절한 "방향"값으로 마커를 만들어야합니다. 그 행할 수 있지만 그것은 엄청난 노력처럼 보인다. D3는 실제 응용 프로그램에서이 모든 물건에 전원을 공급한다 정보에 대한

에서, jsfiddle 데모 그러나 문제를 보여줍니다.

사람이 가야하는 가장 좋은 방법의 아이디어가 있습니까? 난 AFRA 이드는 여기서 바퀴를 재발 명했다.

Answer 1

마커를 그리면 처음부터 오른쪽 방향으로 이동 한 다음 orient = "auto"를 사용하여 UA가 사용자를 대신하여 수행합니다.

<marker id="UpArrowPrecise" markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" > 
    <path d="M20,0 L20,10 L0,5 Z" /> 
</marker> 

<marker id="DownArrowPrecise" markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" > 
    <path d="M0,0 L0,10 L20,5 Z" /> 
</marker>