Начиная с сегодняшнего дня, мы будем анализировать, как создать приложение графа топологии HTML5 Canvas с самого базового уровня. HT внутренне инкапсулирует компонент графа топологии ht.graph.GraphView (далее именуемый GraphView), который является компонентом с самым богатым 2D-функцией. в рамках HT и связанные с ним библиотеки классов находятся в пакете ht.graph. GraphView имеет базовые функции графического представления и редактирования, функции топологического соединения узлов и автоматического макета, предопределенные объекты в таких отраслях, как энергетика и телекоммуникации, а также специальные эффекты, такие как рендеринг анимации. Поэтому он имеет широкий спектр приложений и может использоваться в качестве инструмента. инструмент рисования и человеческие ресурсы в области мониторинга. Он имеет машинный интерфейс и может использоваться в качестве общего инструмента графического редактирования и может быть расширен до корпоративных приложений, таких как рабочие процессы и организационные диаграммы. Проще говоря: диаграмма топологии — это обобщенный термин. Схема топологии сети управления телекоммуникационной сетью, схема топологии электросети, схема мониторинга промышленного управления, схема рабочего процесса, карта мыслящего мозга и т. Д. Проще говоря, она состоит из узловых соединений. Это топологические диаграммы, упомянутые здесь.
С помощью HT очень легко разработать схему топологии сети. Для создания простой схемы топологии сервера и клиента требуется всего несколько строк кода:
Этот пример очень простой и завершает почти все топологические функции сервера и клиента. Без лишних слов угадайте, сколько всего строк кода потребовалось для этого примера, включая все части HTML-тегов? Если не считать пустых строк, там всего 50 строк. Я также много занимался дизайном стиля. В конце концов, пример, который я хочу вам показать, не может быть слишком уродливым~.
Вы можете скачать код самостоятельно по адресу tuputu_jb51.rar. Обратите внимание, что из-за наличия файлов json возникнут междоменные проблемы с изображениями. Для его запуска необходимо использовать Firefox или локальный сервер.
Вначале объясним, что HT — это универсальное решение для графических интерфейсов корпоративных приложений, основанное на стандарте HTML5. Оно содержит богатые библиотеки разработки графических интерфейсов, такие как общие компоненты, компоненты топологии и механизмы 3D-рендеринга. Пользователям нужно только представить ht. .js, и это вообще ни с чем не конфликтует, потому что HT объявляет только глобальную переменную ht, не более того.
Далее проанализируйте часть кода. Сначала постройте сцену карты топологии:
dm = new ht.DataModel();//Контейнер данных gv = new ht.graph.GraphView(dm);//Параметр компонента топологии — это модель данных, связанная с dm gv.addToDOM();//Добавляем граф топологии в тело
Корнем всех компонентов HT является div, который получается с помощью метода getView(). Мы используем этот метод в методе addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //Получаем базовый элемент div компонента style = view.style; document.body.appendChild(view); //Добавляем базовый элемент div в тело style.left = '0'; //HT обычно устанавливает для компонентов абсолютное позиционирование style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //Изменение размера окна прослушивания событий, iv — компонент отложенного обновления}Затем добавьте серверные и клиентские узлы в сцену топологии:
var server = new ht.Node();server.setName('server');//Установим имя узла и отобразим его под узлом server.setImage('serverImage');//Установим изображение узла server.setSize( 20, 60 );//Установим размер узла dm.add(server);//Добавим узел в контейнер данных dm server.setPosition(100, 100);//Установим координаты узла (x, y) var group = new ht.Group();//Группа, в группе может быть несколько узлов group.setImage('groupImage');//Установим изображение dm .add(группа);var клиент = новый ht.Node();//Этот узел добавляется в группу client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Добавить дочерние элементы в группу group.setExpanded(true);//Устанавливаем группу в расширенный режим client.setPosition(200, 100);//Установим позицию узла. Если в группе только один узел, то позиция этого узла может быть позицией группы.Соединение между сервером и клиентом? 2 строчки кода готовы! На самом деле метод добавления узлов в HT очень прост. Обычно требуется всего две строки кода: сначала объявить переменную экземпляра, а затем добавить переменную экземпляра в контейнер данных.
вар край = новый ht.Edge(сервер, клиент);dm.add(край);
Нам интересно, как сделан пунктир? Формирование пунктира построено на соединительной линии и состоит из трех этапов:
Разве это не очень просто! Далее посмотрим, как его настроить:
Edge.s({//Атрибут стиля настройки узла'edge.dash': true, //Отобразить пунктирную линию'edge.dash.flow': true, //Включить поток пунктирной линии'edge.dash.color': 'yellow ', //Цвет пунктирной линии'edge.dash.pattern': [8, 8],//Стиль пунктирной линии 'label': 'flow',//Аннотация узла 'label.background': 'pink',// Цвет фона аннотации узла });Таким образом, были представлены все части дисплея~Подождите, кажется, чего-то не хватает? Кстати, я забыл ввести класс ht.Group в HT. Как следует из названия, он означает группу. Группа может содержать множество узлов. Дважды щелкните, чтобы отобразить или скрыть все узлы в группе. , но я все же сделал небольшое движение, то есть часть дисплея в правом верхнем углу группы на самом деле представляет собой метку, используемую для подсказки инструкций:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Установите цвет фона групповой заметки: дважды щелкните меня!,//Аннотируйте отображаемый контент'note .position ': 13, // Позиция аннотации 'note.offset.y': 10, // Смещение позиции аннотации по оси Y});Мы можем изменить положение аннотации с помощью note.position (конкретную информацию о положении см. в руководстве по HT для веб-позиции) или использовать note.offset.x и note.offset.y для изменения положения аннотации. аннотация.
Весь анализ кода завершен! Я буду обновлять как можно скорее. Если вы чувствуете, что прогресс идет медленно, вы можете зайти на наш официальный сайт (HT для Интернета), чтобы учиться самостоятельно. Я надеюсь, что вы сможете получить больше. Обучение — это ваше личное дело. преобразуйте содержание этой статьи в «Сделайте это своими знаниями!»
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.