Доброго времени суток Мне бы надо сделать свой редактор 2d

Question

Svelte [svelt] - All about Svelte JavaScript framework.

Доброго времени суток Мне бы надо сделать свой редактор 2d

графики, где есть из фигур только точка и прямые, которые могут соединяться в точках. Надо бы координаты точек отсылать на бек, делать матем рассчет, а потом на фронте перерисовывать
Но не особо представляю пока что, как это сделать нормально. Может, кто-то подскажет идею или скинет помощники библиотеки/видео?

#programming #russian #svelte

0

20.09.2023

16 ответов

86 просмотров

Влад Логвин

Старичка d3 так же можно посмотреть

0

20.09.2023

Egor Demeshko

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

0

20.09.2023

Nikita Автор вопроса

Egor Demeshko
не очень понятно что за задача, но если нет анимац...

Анимаций нет Просто на прямой тяну точку, например, и прямая растягивается. Потом взял добавил точку одну, ее соединил с другой точкой и т.д. А на беке я буду уравнения считать разные, например, параллельны ли точки, как нужно рассположить точки, чтобы прямая была больле/меньше и т.д. На фронте просто отрисовка минимальная Задача учебного характера

0

20.09.2023

Egor Demeshko

Nikita
Анимаций нет Просто на прямой тяну точку, например...

у меня похожая задача была, блоки перетягивать и стрелочки рисовать, я и d3 открывал, pixi вроде не было в наборе, и были еще какие-то пару библиотек. не помню. мне быстрее было просто изучить базу svg, по-мойму даже по MDN, кординаты от базового svg элемента будете считать, легко их запихивать в через {x} {y}. обратное получение только у меня не bind был, а по-мойму через комбинацию событий. а d3 довольно мощный инструмент. а так я видел реализацю больше на svg. потом <canvas>, но div блоки видел тоже))) кстати, native getBoundingClientRect с каким-нибудь display: fixed ))

0

20.09.2023

Nikita Автор вопроса

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

Понял Для моей задачи будет легче взять svg обычный, видимо. Тогда почитаю чутка о нем больше

0

20.09.2023

Nikita Автор вопроса

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

Спасибо

0

20.09.2023

Ruslan S

Nikita
Понял Для моей задачи будет легче взять svg обычн...

Вот еще вариант на канвасе paperjs.org, есть api importJSON для данных с бэка

0

20.09.2023

Nikita Автор вопроса

Ruslan S
Вот еще вариант на канвасе paperjs.org, есть api i...

Мб, еще подскажите В принципе можно сделать грубой силой, но мб получше как-то Вот мы тянем прямую за точку. А у нас на прямой ограничение по длинне И как бы мне сделать: пользователь тянет точку у прямой (у прямой 2 точки всего), а там где-то можно сделать в свелте проверку? Мол могу ли я сбда двигать? Или для такиз целей надо уже d3 освоить?

0

20.09.2023

Stas I.🏄

Nikita
Мб, еще подскажите В принципе можно сделать грубой...

D3 чтоб графики строить

0

20.09.2023

Stas I.🏄

Nikita
Мб, еще подскажите В принципе можно сделать грубой...

https://observablehq.com/@d3/gallery

0

20.09.2023

Влад Логвин

Stas I.🏄
D3 чтоб графики строить

На D3 можно и прям редактор сделать, он очень гибкий

0

20.09.2023

Ruslan S

Nikita
Мб, еще подскажите В принципе можно сделать грубой...

Наверно будет проще взять, как советовали svg. Гугли svelte-dnd-action and svg Ограничения можно задать

0

20.09.2023

Влад Логвин

Влад Логвин
На D3 можно и прям редактор сделать, он очень гибк...

Но не рисовалку, это надо понимать) А условно дерево, которое можно свободно осматривать, редактировать отдельные ветки и создавать новые. Если грубо выражаться, это графический инструмент для работы с данными в любом форме. Но если данных нет, а нужна рисовалка – то d3 не лучший выбор

0

20.09.2023

Ruslan S

Nikita
Мб, еще подскажите В принципе можно сделать грубой...

Вот тебе пример. https://svelte.dev/repl/c7712ceeba1a4262a321c5ccfa9ee11b?version=4.2.1 (Нагуглил) А дальше сам развивай)

0

20.09.2023

Nikita Автор вопроса

Ruslan S
Вот тебе пример. https://svelte.dev/repl/c7712ceeb...

Спасибо большое)

0

20.09.2023