Разработка векторного редактора на JavaScript (сложности и идеи)

[Aetet]

А как же код? А репозиторий на гитхаб?

[evalexdy]

поскольку в итоге нашел заказчика на коммерческий продукт, то полноценных исходников, к сожалению, не будет

Одно из условий заказчика, не выкладывать исходники в открытый доступ. В принципе, мне было бы достаточно идей и описания ошибок, которые не стоит повторять.

[krox]

А дать ссылку на сайт, где это всё реализовано? Можно в ЛС.

[LevshinO]

Возможно, пригодится для оптимизации контуров: github.com/mourner/simplify-js

[evalexdy]

Спасибо огромное, то, что нужно! Я на эти расчеты кучу времени угробил, поскольку даже не знал, в какую сторону копать.

[LevshinO]

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

[evalexdy]

Переписал процедуру «чистки» точек на алгоритм, используемый по вашей ссылке — точность практически совпадает для контуров любой сложности. Спасибо огромное еще раз!

[initbit]

Зачем планируете переводить работу с объектами на SVG?

[evalexdy]

Потому что как показала практика, работа с объектами в CANVAS дико геморройная.

Пример: чтобы определить, что мы навели мышку на контур сложной формы, нарисованный в canvas, необходим вагон плясок с бубном. Либо мы должны хранить данные в MAP для картинки, которая лежит поверх canvas (но тогда проблемы с фиксацией наведения собственно на canvas и оформление различных подсветок), либо сойти с ума и писать на JS проверку на попадание точки в контур самостоятельно. В случае же с SVG, вешаем на готовый контур-объект любые события, хоть подсветку, хоть переход по ссылке, описываем оформление в CSS и все, готово. Кроме того, если объектов будет много — их обработчик на JS тачнет ощутимо томрозить, а в случае с SVG, мы работаем только с текущим объектом и не паримся.

Но в итоге ситуация выглятит так: вся работа с объектами, например, выбор, подсветка — проходит через SVG, редактирование же происходит в canvas, поскольку там реально проще получить кусок картинки и/или перевести кусок в массив для дальнейшей работы.

[initbit]

Когда то давно писал подобный редактор

[evalexdy]

Да, я видел ваши статьи и вот цитата из одной из них:

«Почти всё готово, осталось немножко всякой фигни по мелочам». Прошло три года. Сейчас в голове — «Вот теперь точно почти всё готово!».

Понятно, что вы не 3 года без отрыва работали над редактором, но у меня не было ни времени, ни особого желания биться головой о canvas, когда под руками лежит SVG, где все гораздо проще.

[Funbit]

Конечно, если писать велосипед на каждый маленький алгоритм, то работа с канвасом будет гемморойной. Почему было не взять один из готовых фреймворков, которые дают возможность работать с более продвинутыми примитивами? Например KineticJS. Такой редактор пишется за пару дней.

[evalexdy]

Да, если знать, например, про KineticJS. Именно поэтому я и написал этот пост, чтобы получить как можно больше полезной информации и чтобы читающие избежали моих ошибок.

[gvozd1989]

Делал похожий редактор на основе проекта: github.com/summerstyle/summer, но без автоопределения контуров. Интересно было бы потыкать в демо вашего редактора. :)

[evalexdy]

В этом редакторе мне понравился не только функционал, но и то, что его разработчик — девушка. А так — да, SVG редактор, все что нужно типовое — поддерживает, включая выгрузку в HTML. Я его, кстати, всерьез рассматривал как основу, но в итоге отказался, слишком тяжеловесный, мне нужно было что-то легче.