Комментарии 16
А может есть готовый пример, где можно блоки перетаскивать и кривая, соответственно бы изменялась, а также масштабировать рабочую область? Как в блендере.
Мне кажется, тема перетаскивания блоков и масштабирования рабочей области заслуживает отдельной статьи, очень уж много кроме пересчета кривой там происходит :)
Если интересно - я напишу об этом
Не совсем чистый SVG, а D3, но вполне наглядно тут.
Данный способ отрисовки соединения справедлив для нод, чьи порты располагаются на противоположных сторонах. Однако, для портов, расположенных на одной стороне, можно использовать кубические кривые Безье
Кубическая, кажется, подойдет и для случая противоположных сторон. Насколько я знаю, подобные соединительные линии рисуются именно кубическими.
А зум работает в вашем приложении?
Кстати, а почему всё таки через DOM, а не через canvas?
Безумно интересная статья. Если честно, даже не подозревал, что можно таким способом реализовывать описанные вещи, так как мало с таким сталкивался. Спасибо вам)
А вы прям всю функциональность с нуля пишете? Работаю над проектом с похожей концепцией, но за основу взяли rete.js
Как рисовать красивые соединения с помощью SVG