Моя цель
Моя цель — разработать систему, которая анимирует любой процесс в целом, представленный в виде блок-схемы, которую можно нарисовать на экране.
Например, конвейер архитектуры. Он будет состоять из набора прямоугольников, представляющих различные компоненты, такие как регистр, компонент АЛУ, память и т. д. Также будут стрелки, указывающие друг на друга.
Поэтому я хотел бы иметь возможность указать количество фигур, которые я хочу нарисовать, изменить форму и добавить к ним текст, а также соединить их стрелками. Наконец, я хотел бы показать какую-то анимацию между ними.
Конкретный пример
Здесь я постараюсь подробно описать, что будет делать мое приложение. Таким образом, пользователь сможет рисовать модули (например, прямоугольники) и перетаскивать их. Затем пользователь может использовать стрелки, чтобы показать связи между ними. Наконец, я хотел бы показать какую-то анимацию, которая шаг за шагом идет от стрелки к стрелке, чтобы показать, какой модуль (прямоугольник) выполняется первым. Анимация может заключаться в простом изменении цвета стрелки или прямоугольника во время выполнения.
Моя проблема
Я теряюсь в том, какие инструменты я должен использовать для достижения этого. Я новичок в мире разработки и хочу убедиться, что у меня есть простые библиотеки с открытым исходным кодом. Мне было интересно, есть ли какие-либо библиотеки с открытым исходным кодом, доступные в JS. Пока я знаю о холсте HTML5, я хочу выбрать простые в освоении инструменты. Я знаком с HTML и JS. Поэтому я бы предпочел, чтобы кто-нибудь подсказал мне, какие инструменты я могу использовать для достижения своей цели. Также имейте в виду, что я не буду хорошо использовать некоторые расширенные библиотеки для рисования диаграмм, поскольку я очень новичок.
По сути, я хочу начать с простого инструмента, чтобы я мог легко его изучить, а также убедиться, что он достаточно популярен при поддержке сообщества. Я знаю, что это довольно открытый вопрос, поэтому все предложения приветствуются.
Примечание . Дело в том, что я не хочу тратить время на отрисовку прямоугольников и анимацию, я полагаю, что поскольку холст прост в использовании, я буду использовать его, если не будет более простого варианта. Таким образом, я могу сосредоточиться на основной концепции моего приложения.
Отличное место, чтобы начать знакомство со всеми видами таких библиотек JS, — это модули Graphing ...
Несмотря на то, что это связано с drupal , эта связанная страница содержит множество ссылок на то, что в Drupal называется «модули» (= плагины).
Но довольно часто в предложенной ссылке есть указатели на JS-библиотеки, такие как:
Примечание : вопрос здесь явно о Graphs , не путать с Charts , вроде библиотек (движков построения диаграмм), упомянутых в Сравнение модулей построения диаграмм .
Попробуйте jsplumb, jsPlumb предоставляет способ «соединить» элементы пользовательского интерфейса вместе». Внешний вид приятный. Использование выглядит довольно просто. http://www.jsplumb.org/demo/flowchart/dom.html
jsPlumb предоставляет разработчику средства для визуального соединения элементов на своих веб-страницах. Он использует SVG в современных браузерах и VML в IE 8 и ниже. Поскольку он обеспечивает способ соединения всех элементов пользовательского интерфейса вместе. Последняя версия 1.7.5. Начиная с версии 1.7.0, jsPlumb больше не поддерживает YUI или Mootools — если вы хотите использовать какую-то внешнюю библиотеку для управления перетаскиванием, то jQuery — ваш единственный вариант. Но рекомендуется использовать vanilla jsPlumb везде, где это возможно: он быстрее, чем версия jQuery, он предлагает больше возможностей (перетаскивание нескольких элементов, несколько областей действия), а поскольку обработка событий и код перетаскивания также являются проектами, управляемыми jsPlumb, вы у вас больше шансов получить запрос функции для требований, связанных с такого рода вещами. Плюс, весьма вероятно, что в какой-то момент поддержка разновидности jQuery будет прекращена. Дата пока не запланирована, но вполне вероятно.
Essential Diagram для JS сделает то, что вы ищете.
Основные демонстрации диаграмм
Essential Diagram не имеет открытого исходного кода, но доступна бесплатная лицензия сообщества.
С уважением,
Дэвис
Примечание: я работаю в Syncfusion.
Если вы не возражаете против использования javascript и HTML, вы можете изучить THREE.js для такого рода проектов. Довольно низкая кривая обучения и мощный набор инструментов рисования, которые вы можете использовать, чтобы начать с простых геометрических фигур (кубы, сферы и т. д.) и изменить их на более конкретные объекты позже, когда они будут вести себя так, как вы хотите.
Хорхе Кампос
Ученик
Хорхе Кампос
Ученик