Как сделать простой SVG редактор на JavaScript?

Question

[tushev]

Потребовалось сделать в веб-приложении простой редактор пологонов. Если конкретно, то в приложение будут загружаться сканы планов зданий. Необходима возможность интерактивно рисовать и редактировать определенные области на этом плане в виде полигонов. Потом координаты вершин этих полигонов будут сохраняться в базу данных, для пользователей они будут отисовываться, на них будут вешаться события итп..
Попытался сходу найти какие то готовые простые решения, и к своему удивлению не нашел. Изобретать велосипед не хочется, да и знания JS у меня на среднем уровне. Вешать какие то монструозные фреймворки тоже не хочется.
Подскажите пожалуйста какие нибудь библиотеки или решения для моей задачи. Желательно с возможностью в дальшейшем допиливать функционал редактора.

Comments

[7896467]

Добрый день. Удалось реализовать?

[tushev]

Добрый.
Да. Использовал вот это:
https://svgjs.com/docs/3.0/
https://github.com/svgdotjs/svg.draw.js
https://github.com/svgdotjs/svg.draggable.js

Answer 1

[Владимир Проскурин]

да и знания JS у меня на среднем уровне

У меня знания на среднем уровне, и я могу спокойно такую штуку написать. Сделайте какой-нибудь вывод с этого.

Самое легкое и быстрое, это использовать Vuejs (ну, или ReactJS). 80кб это не монструозный. Vuejs работает с svg также хорошо, как с html. Просто создаете нужные компоненты, меняете их состояние при определенных событиях.
Вот пример работы с SVG на vuejs https://ru.vuejs.org/v2/examples/svg.html

Comments

[tushev]

Редактирование полигонов подразумевает много операций: добавить узел, удалить узел, перетащить полигон, перетащить группу узлов, выбрать другой полигон, изменить какие то свойства полигона, корректное масштабирование и т.п. Конечно ничего особо сложного в этом нет, но и за пару часов написать такое с нуля и для уровня продашкен тоже трудновато. Много неочевидных тонкостей.
Да и зачем изобретать велосипед, если эта задача уже наверняка много раз была решена и оформлена в виде хорошего продокументированного и расширяемого решения?
Побыстрому наговнокодить - это можно, но как альтернативное решение, если не найду хорошего готового ))

[Владимир Проскурин]

tushev, это довольно специфичная задача. Максимум что вы найдете, это что-то типа такого решения https://github.com/fatiherikli/react-designer но все равно придется переписывать объекты.

Answer 2

[Максим Тимофеев]

С полигонами работать будет сложно, в js юзают path, это гибче вот пример:
https://codepen.io/wokster/pen/qyrywL

Вешать какие то монструозные фреймворки тоже не хочется.

Не совсем понимаю что такое "монструозные"? Мне кажется можно взять что-то типа vue.js и все это реализовать. В том числе и с полигонами, но попомните мое слово, Вы в процессе разработки не раз пожалеете, что это не path.

Изобретать велосипед не хочется, да и знания JS у меня на среднем уровне.

Тут прийдется поизобретать. Ибо задача если и решалась, то продается. Это трудоемкая задача и наверняка если кто и делал, то для кого-то за денежку, а как следствие не может кинуть в свободный доступ. Сам планировал делать подобное, отказался из-за нехватки времени. Тут не все так просто как кажется на первый взгляд.

Answer 3

[VoidVolker]

Первые несколько страниц ссылок в гугле ведет на десятки вполне себе работающих SVG редакторов, примеров и статей. Вы точно искали? bfy.tw/KeTL