при использовании paper.js importSVG (), как изменить его путь? - PullRequest
Новая
       51

при использовании paper.js importSVG (), как изменить его путь?

0 голосов
/ 08 июля 2019

С 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, я запутался. Здесь я получаю svg, который я назвал item, который является большим и сложным объектом: 

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

С содержанием массива children, имеющего еще больше потомков, множество других опций. Я хочу получить доступ / копировать / манипулировать узлами пути, но я даже не могу найти путь в объекте. Как я могу это сделать? Кажется, проще просто получить путь из самого файла SVG. Или я что-то здесь упускаю?

Спасибо!

1 Ответ

2 голосов
/ 08 июля 2019

Когда вы импортируете SVG в Paper.js, создается группа оболочки, представляющая корневой тег <svg>.
Вы можете перемещаться по дереву элементов Paper.js так же, как и с обычным деревом DOM, используя свойства children (только для групп) и parent.

Вот эскиз , демонстрирующий решение. 

// 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;
...