由于公司业务需求,想做可视化的架构图、关系图、自动化的东西,寻找的各类图形化的插件,最初本想着用G6,由于G6整段代码复制下来也用不了,改了出不来而且时间紧迫就放弃了。
GoJs对于新手很友好,简单的架构关系图很容易上手
构建基本图形
<body>
<div id='myDiagramDiv' style="border: solid 1px blue; width:400px; height:400px"></div>
</body>
// 引入go.js文件
<script src="./go.js"></script>
<script>
// myDiagramDiv为dom节点id
// 创建图
let myDiagram = new go.Diagram('myDiagramDiv')
// 创建节点 节点中元素的排序方式是 Panel.Auto
let node = new go.Node(go.Panel.Auto)
// 创建图形
let shape = new go.Shape()
// 定义图形属性
// 形状
shape.figure = 'RoundedRectangle'
// 填充颜色
shape.fill = 'lightblue'
// 将图形加到节点
node.add(shape)
// 创建一个文本
let textblock = new go.TextBlock()
// 定义文本属性
textblock.text = 'Hello'
textblock.margin = 5
// 文本添加到节点
node.add(textblock)
// 将节点加到图
myDiagram.add(node)
</script>
会出现一个画布加上一个节点
去除水印
会发现画布是带水印的,接下来就讲如何去水印,如果使用的node包打开gojs里面的release文件夹,使用的那种语言改哪种。如果是引用的js文件,引用了哪个改哪个
打开对应文件全局搜索"7eba17a4ca3b1a8346"
// 一般样式就是 a.xx = ............. ;
// 注意这里 a.Ir 中的 Ir可能是其他内容,可能是pr,hr等等
a.Ir=b.Y[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.Y,Ik,4,4);
把这一段删掉或者注释掉,然后同位置替换上如下代码
a.Ir=function(){return true;};
保存文件,重启项目
通过 GraphObject.make 构建图形
let myDiagram = new go.Diagram('myDiagramDiv')
let $ = go.GraphObject.make
let nodeDataArray = [
{ key: "iscroll容器-1", name: "iscroll容器-1", compId: "111", color: "pink", cursor: "grab", loc: "0 0" },
{ key: "iscroll容器-2", name: "iscroll容器-2", compId: "222", color: "skyblue", cursor: "grab", loc: "0 -100" }
]
let relation = [
{ from: "111", fromNodeType: "component", to: "222", toNodeType: "event" }
];
myDiagram.nodeTemplate = $(go.Node, 'Auto',
// 'Auto':与css设置width:auto同样效果
{
// 添加点击事件
click: function (e, obj) { }
},
// 将节点数据nodeDataArray .loc与图标位置建立联系
new go.Binding('position', 'loc', go.Point.parse),
// 设置节点形状:带圆角长方形
$(go.Shape, 'RoundedRectangle',
// 设置大小,边框大小、颜色,背景色,鼠标手势
{
desiredSize: new go.Size(160, NaN),
strokeWidth: 0,
fill: '#ffffff',
cursor: 'grab'
},
// 将节点数据nodeDataArray .color与节点背景色建立链接
new go.Binding('fill', 'color'),
// 将节点数据nodeDataArray .cursor与节点鼠标手势建立联系
new go.Binding('cursor', 'cursor')
),
// 设置文本节点
$(go.TextBlock,
// 设置文本样式:大小,是否换行,margin
{
desiredSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
margin: 8
},
// 设置文本对应字段
new go.Binding('text', 'name'),
new go.Binding('cursor', 'cursor')
)
)
myDiagram.linkTemplate = $(go.Link,
$(go.Shape, // the link shape
{ strokeWidth: 2, stroke: 'white' }),
$(go.Shape, // the arrowhead
{
toArrow: 'OpenTriangle',
fill: null,
stroke: 'white'
})
);
// 将图表在画布中居中显示
myDiagram.initialContentAlignment = go.Spot.Center;
// 操作支持ctrl+z、ctrl+Y 实现undo和redo
myDiagram.undoManager.isEnabled = true;
//nodeDataArray:graph, linkDataArray: relation
myDiagram.model = new go.GraphLinksModel(nodeDataArray, relation);
属性
- 通用属性
属性 | 值 | |
---|---|---|
Stroke | 边框颜色 | null为无边框 |
margin | 边框间距 | new go.Margin(0, 0, 0, 8) // 括号里面表示上,右,下,左 |
visible | 设置元素是否可见 | true为可见,false为不可见 |
textAlign | 文本位置 | "center"居中 |
editable | 文本是否可编辑 | true,false |
font | 字体 | “bold 8pt Microsoft YaHei, Arial, sans-serif” |
fill | 背景颜色 | |
alignment | 元素位置设置 | 左下:go.Spot.BottomLeft 右下:go.Spot.BottomRight 左上:go.Spot.TopLeft 右上:go.Spot.TopRight |
isMultiline | 编辑时是否允许换行 | 默认true |
maxLines | 设置文本显示的最大行数 | |
minSize | 最小大小 | new go.Size(10, 16),控制了最大大小后,文本就会自动换行了 |
maxSize | 最大大小 |
- 画布属性
属性 | 值 | |
---|---|---|
initialContentAlignment | 画布初始位置 | go.Spot.Center |
initialPosition | 初始坐标 | New go.Point(0, 0) |
allowDrop | 拖拽 | Boolean |
allowMove | 移动节点 | Boolean |
allowDelete | 删除 | Boolean |
allowCopy | 复制 | Boolean |
allowClipboard | 剪切 | Boolean |
allowSelect | 选中 | Boolean |
allowZoom | 缩放 | Boolean |
allowInser | 插入 | Boolean |
“undoManager.isEnabled” | 撤销和重做 | Boolean |
allowHorizontalScroll | 水平滚动条 | Boolean |
allowVerticalScroll | 垂直滚动条 | Boolean |
isReadOnly | 只读 | true |
“animationManager.duration” | 画布初始化动画事件 | Number |
“animationManager.isEnabled” | 画布初始化动画 | Boolean |
autoScale | 画布比例自适应 | 自适应当前画布:go.Diagram.Uniform 自适应合适大小:go.Diagram.UniformToFill 默认值不自适应:go.Diagram.None |
ismodelfied | 禁止拖拽 | true |
allowRelink | 重现连接现有链接 | true |
allowLink | 绘制新链接 | true |
allowTextEdit | 文本编辑 | Boolean |
// 缩小
myDiagram.commandHandler.decreaseZoom()
// 放大
myDiagram.commandHandler.increaseZoom()