소개

SVG - 원의 중심까지 베지어 곡선을 그릴 때 끝 화살표를 원의 둘레에 놓았지만 현명한 샘플 - Qiita 을 개선한 샘플을 만들었습니다.

이번에는 제대로 베지어 곡선과 원과의 교점에 화살표 종단을 배치하도록 했습니다. 교점의 계산은 자바스크립트 - 2개의 곡선(3차, 2차 베지어 곡선, 직선과 타원호)의 교점을 분할 방식으로 구한다 - Qiita 에 쓴 방법을 사용하고 있습니다.

교점을 구한 뒤는, de Casteljau's algorithm을 사용해 시점에서 교점까지 분할한 베지어 곡선을 새롭게 SVG로 묘화 해 marker-end 속성으로 화살을 설정하고 있습니다.

de Casteljau's algorithm에 대해서는 아래를 참조했습니다.

de Casteljau's algorithm | A Primer on Bézier Curves

Computer Aided Geometric Design - Dr. Thomas W. Sederberg (PDF, 12.1MB) p.20 "2.3 The de Casteljau Algorithm"

데모

데모: htp // bl. 오크스. 오 rg / h 나카무 r / b8 아 f8 아 9007674d18b2b
출처 : htps : // 기주 b. 이 m/h 나카무 r/d3. jsd 등 g-bejie r-r r ゔ ぇ s ぁ mp ぇ / t ree / bege r_

스크린샷

SVG - 원의 중심까지 베지어 곡선을 당길 때 종단 화살표를 원의 외주에 놓았지만 현명한 샘플 - Qiita 에서 시도한 3 패턴 배치의 스크린샷을 붙여 둡니다.







좋은 느낌입니다. 다만, 마지막 예는 원의 중심에 향하고 있지 않기 때문에, 이런 배치는 피하는 편이 좋다고 생각했습니다.

더 좋지 않은 배치의 예를 나타냅니다.


이것을 보고, 우선, 야지리에 중간의 선은 포함하지 않는 편이 좋다는 것을 알았습니다. 다만, 그 대응을 했다고 해도 베지어 곡선의 둘레가 심하기 때문에, 야지리의 양측의 선과 간섭해 버려, 외형이 이마이치입니다. 그래서 이런 배치도 피해야 한다고 생각합니다.