가져온 svg의 경로 세그먼트를 paper.js에 애니메이션으로 적용

Question

Illustrator에서 설계 한 svg를 paper.js로 애니메이션화하려고합니다. 특히 내가하려고하는 것은 svg를 가져온 다음 경로의 포인트를 확장 및 축소하는 것입니다. 다음은 paper.js에서 경로를 이동하는 예입니다. http://paperjs.org/tutorials/paths/working-with-path-items/

결국 원하는 것은 다른 객체의 너비에 따라 확장되는 경로입니다. 물체가 물체에 닿으면 확장되고 물체가 더 이상 물체에 닿지 ​​않으면 정상으로 돌아옵니다. 내가 경로 항목에 모양을 확장 이해하는 것과

project.importSVG(document.getElementById('svg')[, options.expandShapes: true ]); 

option.expandShapes: true :

은 그게 내가 사용하는 SVG를 가져올 알고있다.

확장 및 축소하기 위해 svg의 경로에 어떻게 액세스합니까?

path fill="#FFD495" d="M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5 
    c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8 
    s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3" 

Answer 1

가 project.importSVG 실제로 project에서 Path 항목으로 당신의 SVG 경로를 삽입 한 사용 :

여기 내 SVG 경로입니다.

이들은 project.activeLayer.children을 사용하여 액세스 할 수있는 project의 자식으로 배열에 저장됩니다.

console.log(project.activeLayer.children)을 수행하는 경우 콘솔에서 해당 내용을 검사 할 수 있어야합니다.

이제 경로 자체에 액세스 할 수 있습니다. 두 번째 단계는 원하는 경우 해당 경로의 Segments에 액세스하는 것입니다.

Segments은 Paths의 자식이므로 Path.segments에 액세스 할 수 있습니다.

---

당신은 당신이 SVG를 가져온 후 약 Project Hierarchy 및 Path Items

Answer 2

당신은 경로로 취급 할 수없는 읽어야합니다. 그러나 여기에 목표를 달성하는보다 간단한 방법이 있습니다.

SVG 경로 구문을 사용하여 pathData을 통해 Paper.js에서 직접 경로로 SVG를 만듭니다. 이 같은

:

pathData = 'M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3'; 

var path = new Path(pathData); 
path.strokeColor = 'red'; 
path.strokeWidth = 10; 

는 Paper.js Sketch

에 결과를 볼 그리고 당신은이 경로에 애니메이션을 적용 할 수 있습니다.