Svg.js Duplicate, Arrays, Merge

Question

Я новичок в SVG.js и в концепции в целом, хотя у меня есть фон векторной графики. Так что я ищу понимание концепции.

Дублирование , нашли только функцию копирования массива, как дублировать объект? Как пример:

element.rotate(45, 50, 50)

Это вращает элемент, что если я хочу сохранить копию неповрежденной?

Сам массив . Что это? Не выглядит как массив в программе графического дизайна. Что если я хочу просто иметь массив из трех необработанных данных с пятью столбцами элементов?

Слияние . Если у меня есть дуга и линия, могу ли я объединить их в путь? Затем поверните вокруг конечной точки их копию и снова объедините, чтобы получить хорошие углы?

Может быть, я слишком много спрашиваю, но, как новичок, мне нужно немного продвинуться вперед.

Answer 1

Отвечая на мой вопрос, если кому-то это понадобится однажды.

Прежде всего SVG.js и его разновидности не работают с геометрией, они работают с SVG. Сначала изучите SVG, а потом решите, нужны они вам или нет. В моем случае Vue сделает работу проще.

Что касается других:

Дублирование - все, что SVG предоставляет в моем случае, в основном <use>, но будьте осторожны со стилями, которые нельзя изменить.

Массивы - нет такой вещи, как в графическом редакторе CG, вы должны программировать их самостоятельно. Как мне грустно, SVG.js поможет вам только с SVG, а не с геометрией

Объединение - теоретически возможно, но не существует готового решения.

Answer 2

Метод clone() - ваш друг, если вы хотите скопировать фигуры.Вы можете прочитать документы на svgjs.com, чтобы узнать больше.

Для слияния: Нет, это невозможно с svg.js, хотя в общем и не невозможно.Просто никто не просил эту функцию до сих пор, или у кого не было времени, чтобы задействовать свой мозг для ее решения.Существует вероятность того, что это будет учтено, когда вы откроете новый выпуск и запросите эту функцию.Однако в вашей идее есть одна проблема:

// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">

// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">

// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">

// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">

Как видите, поворот вашего пути не меняет значения d-attr.Вращение - это преобразование, которое выполняется с помощью атрибута transform.Таким образом, вы не можете легко объединить эти 2 пути вместе.Вместо этого сначала нужно избавиться от преобразования и применить его к каждой точке напрямую.Тогда вы можете слить.Это снова возможно, но, возможно, это не то, что кто-то уже реализовал.Было бы здорово сделать плагин, хотя ...