Frontiers: Что нужно дизайнеру блок-схем? Один из них — это возможность рисовать графики на основе svg или canvas для рисования узлов (прямоугольников, кругов, многоугольников) и линий различной формы, а другой — взаимодействие между графиками, включая перетаскивание, соединения между узлами и т. д. Наконец , удобство панели холста, в том числе: такие как функция сетки в ps, выравнивание ступеней, отвод ступеней, масштабируемость канвы, кнопки быстрого доступа и т. д., какие решения с открытым исходным кодом делает фронт- конечное сообщество должно способствовать нашему быстрому развитию У вас есть собственный конструктор блок-схем?
1. Способность к рисованию
Когда дело доходит до возможностей рисования, есть два основных способа реализации сети: Canvas и Svg, давайте посмотрим, в чем разница между ними.
| Canvas | SVG | |
|---|---|---|
| Объект операции | На основе пикселей (динамическое растровое изображение) | на основе графических элементов |
| водить машину | только по сценарию | Поддержка шагов и CSS |
| событие взаимодействия | Взаимодействие пользователя с пикселем (x, y) | Взаимодействие пользователя с графическими элементами |
| представление | Подходит для небольших площадей и большого количества сценариев применения | Подходит для большой площади, области применения небольшого количества |
Сцена на основе блок-схемы: узлов не слишком много, плюс узлы - статические графы, и динамического рендеринга не так много, тогда svg может быть более подходящим, а svg имеет высокую экономию средств, но если в случае больших- масштабировать данные или примитивы Пожалуйста, выбирайте внимательно, ведь производительность будет хуже
🌲 Рекомендуем к прочтению:
- Каковы преимущества холста SVG и HTML5 и какой из них более перспективен?
- Начало работы с SVG - Как написать SVG от руки
2. Существующий конструктор блок-схем
Существует множество готовых конструкторов блок-схем, подходящих для распространенных сценариев применения.
Однако готовые конструкторы блок-схем на рынке поддерживают только общие сценарии приложений.Как расширение на основе нашей собственной линейки бизнес-продуктов становится проблемой?
Например: некоторое время назад это было связано с разработкой веб-приложения службы интеграции данных, которое включало модуль расстановки панелей, необходимо было настроить адаптер преобразования данных, например, настроить некоторые узлы для пользовательского преобразования данных, что само по себе дизайнер блок-схем, что я и сделал После некоторых предварительных исследований мы изучили некоторые решения для разработки дизайнера процессов с открытым исходным кодом.Давайте сначала посмотрим, как выглядит обычный дизайнер процессов.Источник изображенияlogicFlow
3. Решение для веб-разработки дизайнера процессов с открытым исходным кодом
3.1 Jsplumb
Официальное введение: jsPlumb — относительно мощный компонент для рисования, предоставляющий метод, который в основном используется для соединения элементов на веб-страницах. В современных браузерах используется технология SVG или Canvas.Ссылка на официальный сайт
jsPlumb — относительно ранний компонент для рисования с долгой историей, он был открыт 7 лет назад и может использоваться для разработки дизайнеров блок-схем,jqueryЕго можно использовать, потому что это библиотека, основанная на подключении к DOM.Ядро в основном включает следующие модули
- Источник: исходный узел
- Цель: целевой узел
- Якорь: точка привязки
- Конечная точка: конечная точка
- Разъем: подключение
- Наложения: можно понимать как текст или стрелки на соединительной линии.
Ниже приведен пример строки этих модулей.
Если вы хотите использовать его в vue, это также возможно.Я не буду представлять его здесь.Заинтересованные детской обуви рекомендуется прочитать.
🌲 Рекомендуем к прочтению:
3.2.Antv G6
Официальное введение: G6 – это простой, удобный в использовании и полноценный движок для визуализации графиков, основанный на широких возможностях настройки и предлагающий серию элегантных и простых в использовании решений для визуализации графиков. Это может помочь разработчикам создавать свои собственные приложения для визуализации графиков, анализа графиков или редактора графиков.Ссылка на официальный сайт
G6 также необязателен с точки зрения рисования. Вы можете использовать холст или svg для рендеринга. По умолчанию используется Canvas. С точки зрения визуализации и взаимодействия G6 более заметен. После злоупотребления jsplumb мы знаем, что это по сути графическая визуализация библиотека под антв, упор на Не то же самое, ядро визуализация
🌲 Рекомендуем к прочтению
3.3 bpmn-js
Официальное введение: набор инструментов для рендеринга BPMN 2.0 и средство веб-моделирования. Написанный на JavaScript, он встраивает диаграммы BPMN 2.0 в современные браузеры и не требует серверной части. Это упрощает встраивание его в любое веб-приложение, а также упрощает реализацию конструктора блок-схем во внешнем интерфейсе.Ссылка на официальный сайт
Позвольте мне сначала представить, что, черт возьми, такое BPMN
BPMN (обозначение моделирования бизнес-процессов) — это общий и стандартный язык для моделирования процессов, который используется для построения блок-схем бизнес-процессов, чтобы лучше понять бизнес-процессы и взаимосвязи между различными отделами, и направлен на содействие коммуникации и коммуникации бизнес-процессов. .понять.
Ядро BPMN 2.0 в основном включает следующие основные элементы моделирования.
-
Действие: оно используется для обозначения действия, которое должно быть завершено, которое используется для функционирования, будучи сгруппированным процессом.
-
Событие (Event): используется для обозначения того, что произошло в жизненном цикле процесса.
-
Шлюз (Gateway): используется для управления потоком процесса.
-
Поток: это линия, соединяющая два узла процесса.
Давайте рассмотрим следующий практический пример, основанный на блок-схеме бизнес-процесса BPMN (процесс выхода).
bpmn-js зависит от двух важных библиотек:
- диаграмма-js: отвечает за рисование графики и проводки, предоставляет методы для взаимодействия с этими графическими элементами.
- bpmn-moddle: позволяет нам читать и записывать XML-документы, совместимые со схемой BPMN 2.0, и получать доступ к информации, связанной с BPMN, за графиками и проводами, нарисованными на диаграмме.
Пример диаграммы онлайн-редактирования
Здесь я хотел бы немного упомянуть Activiti.Activiti — это механизм рабочего процесса с открытым исходным кодом, который реализует спецификацию BPMN 2.0. Он может публиковать разработанное определение процесса и планировать процесс через API, но это выходит за рамки внешнего интерфейса. сверхбыстрый и сверхстабильный процессный движок BPMN2.0 выше моего понимания 📖
🌲 Рекомендуем к прочтению:
3.4 LogicFLow
LogicFLow — новейшее веб-решение для разработки процессов.Официальное введение: LogicFlow создан на основе опыта технической команды Didi в сфере обслуживания клиентов.Это интерфейсная структура для визуализации процессов, разработанная интеллектуальной платформой среднего уровня Didi.Ссылка на официальный сайт
Позиционирование LogicFLow объединяет возможности развития бизнеса и возможности визуального взаимодействия.
В отличие от jsplumb, упомянутого в первом разделе, LogicFlow учитывает утомительную предпосылку работы на основе DOM, а потребление большинства ресурсов относительно велико, и выбирает концепцию инфраструктуры MVVM и вводит виртуальный DOM для решения проблемы эффективности обновления в определенных случаях. сценариях, это также в определенной степени компенсирует проблемы с производительностью рендеринга, которые могут быть вызваны «рендерингом графики на основе Svg».
И LogicFlow также удовлетворяет узлам и соединениям спецификации BPMN2.0, о которых мы упоминали в предыдущем разделе.
LogicFLow, как последнее решение с открытым исходным кодом для проектировщиков процессов, получил 1000 🌟 с момента открытия исходного кода github в течение трех месяцев.Позже мы сделаем несколько попыток в LogicFLow, а затем поделимся ими с вами в виде статей.
🌲 Рекомендуем к прочтению:
Прошлые популярные статьи📖:
- Разработать большой экран визуальных данных от 0 до 1 (включено)
- Построение интерфейсной системы знаний Шуцзяна (часть 1)
- Построение внешней системы знаний Шуцзяна (ниже)
- Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
- Конфигурацию Babel тупо не могу понять
- Как лучше управлять интерфейсом API
- Что интервьюер спросил вас об узле
- передовой инжиниринг
- Вы изучили BFF и Serverless?
- Развертывание интерфейсной эксплуатации и обслуживания
Привет, я 🌲 Tree Sauce, пожалуйста, выпей 🍵 Запомни три раза подряд~
1. Не забудьте поставить лайк после прочтения, есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья попала в Github frontendThings благодаря Star✨