캔버스 요소에 벡터 그리기 : 벡터 문자열을 생성하는 방법

Question

프로젝트의 경우 현재 대화 형 캔버스 요소를 구현해야합니다. 캔버스에 하위 영역 수로 나뉘어 진 모양이 있습니다. 사용자는이 영역에서 하위 영역을 선택하고 선택한 영역에 다른 색상을 적용 할 수 있어야합니다. [이 영역은 정사각형이나 원이 아닌 사용자 정의 경로]

여기에는 달성하려는 것과 비슷한 것이 포함되어 있습니다. 그것은 kinetic.js를 사용합니다. Kinetic.path() 메서드를 사용하여 세계지도를 그리는 방법을 각 국가의 벡터 문자열로 보여줍니다.

발 모양이나 다른 모양과 비슷한 것을 얻기 위해 나를 연결하십시오. 원하는 모양을 그리려면이 벡터 문자열을 어떻게 얻어야합니까?

이것이 가장 좋은 방법일까요?

이 파일 (http://raphaeljs.com/world/world.js)에는 world-map에 대한 벡터 문자열이 포함되어 있습니다. 그들이 어떻게 그것을 생성했는지 모르겠습니다. 그게 내가 관심있는 곳이야.

그림에서 벡터 문자열을 생성하는 방법은 무엇입니까?

Answer 1

svg 편집기 (예 : online svg editor)를 사용하십시오. 그런 다음 그림을 가져 와서 경로를 사용하여 그림 요소를 되돌립니다.