gojs — очень хороший инструмент для рисования блок-схем js framework. У этого фреймворка нет китайской версии API, и в Интернете очень мало информации. Цель этой статьи — помочь читателям понять всю структуру фреймворка и базовый рисунок. Методы. Эта статья не содержит технических подробностей. Слишком много описания, и адрес API будет прикреплен для справки.
Готовые рендеры:
Адрес источника:GitHub.com/The Air of Wood/Сэм бежит…
Шаг 1 Инициализируйте холст
html
<div id="diagram" style="width: 1000px; height: 500px"></div>
javascript
// [1]
const $ = go.GraphObject.make
// [2]
const diagram = $(go.Diagram, 'diagram', {
// 令绘制的元素相对画布居中
'initialContentAlignment': go.Spot.Center,
// 是否可撤销编辑
'undoManager.isEnabled': true
})
Комментарии к коду:
-
gojsЕсть два способа использования, один из них - использовать оригиналgoобъект, второйКонструктор способ создания, т.е. использоватьgo.GraphObject.makeсоздание объекта, мы присваиваем объект$, конечно, можно использовать и другие символы, чтобы избежать конфликтов -
$(go.Diagram, [selector], [options]), этот метод выполнит операцию инициализации холста холста, а также предоставит множество элементов конфигурации для использования.Class Diagram
Шаг 2 Напишите шаблон узла
Так называемый шаблон узла относится к созданию единого шаблона стиля (коллекции) для узлов, если дети, которые использовали фреймворки, такие как react или vue, естественно понимают смысл шаблонов, то же самое верно и в gojs. установили общий шаблон, нам нужно только, чтобы данные можно было передать
Существует два способа создания шаблонов узлов в gojs.nodeTemplateиnodeTemplateMap
Объясните только здесьnodeTemplateMap, это коллекция шаблонов узлов, которая может настраивать богатые шаблоны узлов.
Его метод использования аналогичен классу css, определите имя класса при определении шаблона и укажите имя класса при вызове.
Мелкий измельчитель
// [1]
diagram.nodeTemplateMap.add('templateName',
$(go.Node, go.Panel.Auto,
$(go.TextBlock,
{ text: 'test' },
/*[2]*/new go.Binding('text', 'text'))
)
)
// [3]
const nodeDataArray = [
{ category: 'templateName', key: 'check', text: '审核' }
]
// [4]
const linkDataArray = []
// [5]
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
Комментарии к коду:
1.diagram.nodeTemplateMap.add([name], [node])
- и
ES6 SetМетод очень похож,addЭто означает добавление шаблона, первый параметр — это имя шаблона, а второй параметр — конфигурация конкретного шаблона. - Второй параметр должен быть передан
$(go.Node, [Panel], [Elements])Конструктор- PanelОтносится к макету узла
- Элементы могут бесконечно вкладывать элементы в узел,текстовый блок Графическая форма ИзображениеКартинкамогут быть добавлены как элементы
2.new go.Binding([origin], [target], [filter = Func])
- Это привязка данных в gojs, использующая этот метод для перехода между шаблонами и реальными данными.
- Этот метод может бытьлюбойиспользуется в конструкторе
- origin: имя свойства в этом конструкторе
- цель: имя свойства, которое необходимо привязать к набору данных.
- фильтр: функция фильтра
3. ОпределитеНабор данных узла,
-
keyатрибут является обязательным и уникальным, он будет применяться кнабор данных линии соединениясередина -
categoryатрибут соответствуетшаблон узлаИмя шаблона в -
textкоторыйnew go.Bindingсвязанные данные
4. Набор данных линии соединения, который здесь пуст, пока не будет обсуждаться.
5.diagram.modelОпределяет, какие элементы отображаются на странице, мы создаем общий экземпляр соединения.new go.GraphLinksModelКонструктор принимает два параметра, ранее созданныйnodeDataArrayиlinkDataArray
Практическая тренировка
diagram.nodeTemplateMap.add('node1',
$(go.Node, go.Panel.Position,
// 规定该节点的宽高, 内容超出会被隐藏
{ width: 230, height: 240 },
// 绑定节点的位置属性, 用来控制节点处于画布的哪个位置
new go.Binding('position'),
// 背景图片与图标
$(/*[1]*/go.Panel, /*[2]*/go.Panel.Auto,
{ position: new go.Point(0, 72) },
$(go.Picture,
{
width: 178, height: 168,
},
new go.Binding('source', 'bgSrc')),
$(go.Picture,
{
width: 64, height: 64,
},
new go.Binding('source', 'iconSrc'))
),
// 文字背景与文本信息
$(go.Panel, go.Panel.Position,
{ position: new go.Point(50, 0) },
$(go.Picture,
{ width: 178, height: 100 },
new go.Binding('source', 'textBgSrc')),
$(go.TextBlock,
{
stroke: '#FFF',
font: 'normal bold 24px Serif',
position: new go.Point(80, 20)
},
new go.Binding('text'))
)
)
)
const nodeDataArray = [
{
position: new go.Point(0, 0),
category: 'node1',
key: 'check',
bgSrc: './images/circle_1.png',
iconSrc: './images/icon-apply.png',
textBgSrc: './images/text-bg-1.png',
text: '申请'
}
]
Комментарии к коду:
1. Используется здесь$(go.Panel)Вы можете понять это как div в html, см. следующий код:
diagram.nodeTemplateMap.add('node1',
$(go.Node, go.Panel.Position,
{ width: 230, height: 240 },
new go.Binding('position'),
// 背景图片与图标
$(go.Panel, go.Panel.Auto,
{ position: new go.Point(0, 72) },
$(go.Picture,
{
width: 178, height: 168,
},
new go.Binding('source', 'bgSrc'))
)
)
)
Шаблоны узлов в gojs можно «перевести» в следующую структуру (Если вы знакомы с синтаксисом JSX, лучше понять)
<Node
className="node1"
layout="Position"
style={{ width: 230, height: 240 }}
position={position}>
<Panel
layout="Auto"
style={{ position: new go.Point(0, 72) }}>
<Picture
source={bgSrc}
style={{width: 178, height: 168}} />
</Panel>
</Node>
Нам нужно только строго следовать грамматическим правилам gojs и вкладывать один за другим, чтобы нарисовать любую модель узла, которую вы хотите.
2.go.Panel.AutoМетод компоновки, который позволяет центрировать дочерние элементы в Panel один за другим.NodeОберните контейнер в центре (вы также можете установить смещение), дополнительные правила макета, такие какPosition Vertical Spotподождите, пожалуйста, двигайтесьPanels, официальная документация объяснила это очень подробно
Ниже приведены текущие эффекты трех узлов. Теперь пришло время соединить линии между узлами!
Шаг 3 Напишите шаблон линии соединения
Запомните ранее определенные
linkDataArrayМассив? Этот массив содержит информацию обо всех соединениях. Ценность внимания в том, что сначала должен быть узел, а затем ссылка
Как и шаблон узла, шаблон соединителя также разделен наlinkTemplateиlinkTemplateMapЗдесь мы вводим только linkTemplateMap
Практическая тренировка
diagram.linkTemplateMap.add('link1',
$(go.Link, // [1]
{ routing: go.Link.Normal },
new go.Binding('routing'),
new go.Binding('fromSpot'),
new go.Binding('toSpot'),
// 线段模板
$(go.Shape, // [2]
{ strokeDashArray: [10, 20] },
new go.Binding('stroke'),
new go.Binding('strokeWidth')),
// 箭头模板
$(go.Shape, // [2]
{ stroke: 'transparent', strokeWidth: 0 },
new go.Binding('fromArrow'),
new go.Binding('toArrow'),
new go.Binding('scale', 'arrowScale'),
new go.Binding('fill', 'arrowfill')),
// 文字块
$(go.Panel, go.Panel.Auto, // [3]
new go.Binding('alignmentFocus', 'textPos'),
$(go.Shape, { fill: 'transparent' }, new go.Binding('stroke')),
$(go.TextBlock,
{ margin: 10 },
new go.Binding('stroke'),
new go.Binding('text'))
)
)
)
const linkDataArray = [
{
category: 'link1',
from: 'coor', to: 'apply', // [4]
routing: go.Link.Orthogonal,
toArrow: 'Standard',
arrowfill: 'orange',
arrowScale: 2,
fromSpot: new go.Spot(0, 0.42),
toSpot: new go.Spot(0.42, 1),
stroke: 'orange',
strokeWidth: 2,
text: '驳回',
textPos: new go.Spot(0, 1, -100, 20)
}
]
Комментарии к коду:
1.go.LinkЭто контейнер-оболочка для линии соединения, который глобально определяет некоторые свойства линии соединения.
- routingОпределите метод подключения соединительной линии, прямой угол или нормальный и т. д.
- fromSpot toSpotОпределяет положение концов соединителя относительно узлов
- Есть также много настраиваемых элементов, см.Link
2.go.Linkконтейнер может получитьgo.ShapeКонструктор
- Если установлен только этот конструктор
strokeсвязанные свойства, он представляет собой шаблон линии соединения - Если введено
fromArrowилиtoArrowЭто означает установить стрелки на обоих концах отрезка,Пример официального рисунка
3. Точно так же мы можем добавить в отрезок линииPicture TextBlock Shape Panelи другие элементы, а метод записи согласуется с шаблоном узла, за исключением того, что если вы хотите управлять смещением этих элементов, вам нужно установитьalignmentFocusАтрибуты
4. Я уже говорил,nodeDataArrayКлюч в требуется, потому что нам нужноlinkDataArrayКак соединить линии соединения каждого узла через этот ключ
Продолжить рассказ о редактировании шаблона класса gojs в следующем выпуске
(Продолжение следует)