Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   SVG библиотека для манипуляций с элементами (https://javascript.ru/forum/misc/79763-svg-biblioteka-dlya-manipulyacijj-s-ehlementami.html)

Spirtikys 20.03.2020 16:59

SVG библиотека для манипуляций с элементами
 
Добрый день.
Возможно кто-то знает и использовал в своих проектах библиотеку для манипуляции с svg элементами ( polygon, rect, circle ) и может подсказать что-то небольшое по размеру и простое в обращении?
Цель - это отрисовка динамически элементов + возможность их перемещать + изменять им размеры ( в polygon перемещать ребра ).
leaflet или openlayer имеют данный функционал, но тянут за собой слишком много лишнего и их основная цель работа с картой, у меня же карты нету, а нужно размечать элементы на картинке.

Спасибо :)

MallSerg 20.03.2020 17:13

у SVG все очень плохо со скоростью отрисовки всего SVG объекта
разумнее использовать canvas что то на вроде http://libcanvas.github.io/

Spirtikys 20.03.2020 17:24

Цитата:

Сообщение от MallSerg (Сообщение 521558)
у SVG все очень плохо со скоростью отрисовки всего SVG объекта
разумнее использовать canvas что то на вроде http://libcanvas.github.io/

В производительность не упираемся, отрисовка только shapes, да и хочется DOM модель и легко манипулировать через React.
Данная библиотека, судя по репо, уже лет 7 не обновляется. По canvas знаю еще fabric.js , но взаимодействия с такими фигурами проблематично + он не покрывает все мои нужды из указанного ( нету возможности обрабатывать каждое ребро у polygon ).
SVG как то ближе)

Vlasenko Fedor 20.03.2020 18:09

http://fabricjs.com/

Spirtikys 20.03.2020 18:32

Цитата:

Сообщение от Poznakomlus (Сообщение 521561)

Я упоминал ее в сообщении выше.
Возможно я плохо прочитал документацию, но не нашел там нужного взаимодействия над polygon, построить - да, а как потом по точкам двигать и менять размеры не нашел.
В целом, самая большая проблема это именно полигоны и взаимодействия с ними, все остальные фигуры не вызывают проблем, идеальный вариант - это такая же работа как и в leaflet, хочется что-то подобное, но без карты)

Vlasenko Fedor 20.03.2020 18:51

http://fabricjs.com/polygon-animation
https://jsfiddle.net/Fidel90/9s04n68p/
fabricjs polygon example in :)

Spirtikys 21.03.2020 00:51

Цитата:

Сообщение от Poznakomlus (Сообщение 521566)

Первый пример я видел, второй очень забагован и плохо адаптирован к touch screen.
Возможно я плохо объяснил задумку, суть в том, чтобы добиться вот такого эффекта https://gojs.net/latest/extensions/PolygonDrawing.html , плавности и возможности редактирования по точкам ( рисовать разные фигуры как в openlayer и leaflet + взаимодействовать с ними по точкам, манипулировать их размерами ).
Есть на просторах svg.js , но она никак не адаптирована под React, а последняя версия без draw эффекта, как в крупных библиотеках аля leaflet.
У меня 2 режима в приложении: в одном я просто обрисовываю фигуры ( и тут мне хватает чистого svg ), а во втором режиме я должен рисовать эти фигуры сам и передавать координаты. :(

Если не брать в расчет полигоны, то с остальными фигурами проблем как таковых нет, на данный момент вся загвоздка именно в них.

Vlasenko Fedor 21.03.2020 01:52

https://habr.com/ru/post/152731/
Не надо приивязыватся React

Spirtikys 23.03.2020 12:08

Цитата:

Сообщение от Poznakomlus (Сообщение 521574)
https://habr.com/ru/post/152731/
Не надо приивязыватся React

За статью спасибо, уже умаю писать сам, если позволит время и использовать SVG


Часовой пояс GMT +3, время: 05:54.