Используйте svg, чтобы создать блок-схему, аналогичную подключению к Visio, как показано ниже.
На самом деле существует множество библиотек, в которых реализованы блок-схемы, например,jointjs,gojs,jsplumb и так далее. Жаль, что не бесплатно.
анализировать
Если вы хотите сделать это просто, просто используйте кривую Безье, Вам нужно только указать координаты двух точек начальной и конечной точек, и вы можете использовать простой алгоритм для создания пути SVG. Этот алгоритм нужно найти в сети.
Но если вы хотите использовать ортогональные соединения для достижения этой цели, эта сложность поднялась на несколько ступеней. Давайте рассмотрим несколько случаев ортогональных соединений:
Предполагая, что начальная точка находится внизу, а целевой узел находится в правом нижнем углу начального узла, возможны четыре ситуации. Учитывая, что существует четыре возможности ориентации целевого узла относительно начального узла, то имеется 4*4=16 возможностей для всех соединений, а учитывая, что из начальной точки также имеется четыре начальных направления, то все возможности 16 * 4 = 64 вида. То есть, если вы хотите написать if else, вам нужно написать 64 ветки.
Как сделать
Конечно, нет необходимости писать 64 if else, написание программ — это абстрагирование правил!
Разделите это соединение на следующие части:
Так где же этот закон связи? В некоторых случаях он поворачивает за угол, а в других случаях делает еще два поворота.Такую схему найти очень сложно. На рисунке ниже показаны два примера.Конечная точка также находится в верхнем левом углу относительно начальной точки.Первый случай - повернуть на два оборота, а второй случай - повернуть на один оборот.
Однако я использовал восемнадцать коров и двух тигров, чтобы найти его закон.
правда
Окончательное направление этой связи связано со следующими условиями:
Направление отправления от начальной точки
Направление входа в конечную точку
Направление конечной точки относительно начальной точки
Минимальная выносная линия от начальной точки
Минимальная выносная линия перед конечным входом (см. изображение ниже)
6. Время поворота ортогональной линии (когда я это делал, я использовал поворот по средней точке)
Реализовать идеи
Потому что путь svg используется для рисования ортогональных линий. Суть в том, чтобы найти координаты точки поворота (на самом деле она такая же, как и все).
Сначала получаем вектор из начальной точки в конечную точку (далее — прямой вектор) и два ортогональных вектора (далее — горизонтальный вектор и вертикальный вектор прямого вектора)3. Начните вычислять ортогональную линию, сначала получите начальное направление ортогональной линии. Видно, что направление начальной точки и вертикальный вектор прямого направления противоположны, и ортогональная линия не должна идти вниз, поэтому начальная точка ортогональной линии должна быть горизонтальной. На самом деле, мы не знаем конкретной ситуации вертикали и горизонтали.В реальной работе это так: сначала найти вектор, параллельный направлению начальной точки, из горизонтального вектора и вертикального вектора прямого вектора, а затем судить находится ли он в том же направлении.В том же направлении, начальное направление ортогональной линии совпадает с начальным направлением, если нет, то берется другое вертикальное направление.
Затем вы хотите получить окончательную ориентацию ортогональных линий. Это также та же идея: если направление входа в конечную точку противоположно прямому направлению, возьмите вертикальное направление, а если оно такое же, возьмите то же направление.
Начальное направление и конечное направление ортогональной линии получены, теперь необходимо получить положение среднего поворота ортогональной линии. Определите, совпадают ли начальное и конечное направления ортогональной линии. Если они совпадают, вам нужно повернуть два раза. Если они не совпадают, вам нужно повернуть только один раз. .
如果 正交线起始方向 == 正交线最终方向
那么 转弯数 = 2
否则 转弯数 = 1
Если вы повернете поворот, получите координату точки поворота
转弯的坐标点 = 正交线的第一个点 + 正交线起始方向向量
Если вы повернете два поворота, сначала получите первую точку поворота, которая является серединой начального и конечного направлений ортогональной линии.
Наконец сгенерируйте набор координат для всех точек
所有点的坐标集合 = [起点，正交线的起点，...正交线的转弯点，正交线的终点，终点]
Суммировать
Объем вычислений этого алгоритма не очень велик, производительность в порядке, и он подходит для перерисовки во время перетаскивания. Но это не алгоритм поиска пути, что означает отсутствие функции обхода узлов.
Следующий шаг — сделать его с помощью алгоритма Манхэттена.