Question

我正在尝试使用paper.js来动画我在Illustrator中设计的svgs。具体来说，我要做的是导入svg，然后展开和收缩路径上的点。以下是在paper.js中移动路径的示例：http://paperjs.org/tutorials/paths/working-with-path-items/

我最终想要的是根据另一个对象的宽度进行扩展的路径。如果对象正在接触它，它将扩展，如果对象不再接触它，它将恢复正常。

我知道要导入我使用的svg：

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实际上已将您的SVG路径插入Path中的project个项目。

这些作为project的子项存储在数组中，可以使用project.activeLayer.children访问。

如果你console.log(project.activeLayer.children)，你应该能够在你的控制台中检查它们。

所以现在你可以自己访问Path了，第二步是访问这些路径的Segments，如果你愿意的话。

Segments，是Paths的孩子，因此可以Path.segments来吸引他们。

您应该阅读Project Hierarchy和Path Items

Answer 2

导入SVG后，您无法将其视为路径。但这是实现目标的更简单方法。

使用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

中的结果

然后你可以设置这条路径的动画。

动画在paper.js中导入的svg的路径段

2 个答案: