Question

使用Paper.js，我使用以下命令导入了SVG：

var kanji = project.importSVG(url, {
  expandShapes: true,
  onLoad: function(item) {
    console.log("imported SVG!");

  },
  onError: console.log("something went wrong importing")
});

这成功将svg添加到我的画布中。但是，我想操纵SVG的路径。当代码到达onLoad范围时，我会感到困惑。在这里，我得到了名为item的svg，它是一个大而复杂的对象：

initialize {_children: Array(3), _namedChildren: {…}, _matrix: t, _id: 1, _index: 0, …}

children数组的内容具有更多的child，因此还有许多其他选择。我想访问/复制/操纵路径的节点，但是我什至找不到对象中的路径。我怎样才能做到这一点？从svg文件本身获取路径似乎更容易。还是我在这里想念东西？

谢谢！

Answer 1

将SVG导入Paper.js时，将创建一个表示根<svg>标签的包装器组。
您可以像使用普通Paper.js树一样使用项目DOM（仅适用于组）和children属性浏览parent项目树。

这里是sketch演示解决方案。

// This represents the source svg.
const svg = '' +
    '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="267px" height="277px" viewBox="0 0 267 277">' +
    '    <g>' +
    '        <polygon fill="#FFED00" points="180,183 26,183 26,29 181,28 "/>' +
    '        <path fill="#009FE3" d="M243,183c0-34.794-28.206-64-63-64s-63,29.206-63,64s28.206,63,63,63S243,217.794,243,183z"/>' +
    '    </g>' +
    '</svg>';

// We import the svg.
// What we get in return is a wrapper group corresponding to the `<svg>` tag.
const svgGroup = project.importSVG(svg);
// Then we can get our group (`<g>` tag) by accessing the last child of the svg group (the first child is a clip mask corresponding to the `<svg>` `viewBox` attribute).
const group = svgGroup.lastChild;
// Then we can get our path...
const path = group.lastChild;
// ...and do what we want with it.
path.firstSegment.point += 20;

使用paper.js importSVG（）时，如何更改其路径？

1 个答案: