可视化—gojs 超多超实用经验分享(二)
想了想序号还是接上一篇分享的的序号接着写，如果在本文中没有获取需要的答案，可以移步去看看上一篇的分享。gojs 超多超实用经验分享(一)
目录
22. 指定线段连接到节点的某一个特定的接口上
如果不指定链接点的话，gojs会自动规划一条路径，具体算法还不是很清楚，总之大部分时候按默认的算法规划出来的路径，还是比较美观的，但是当节点比较多且关系复杂的时候，可能会出现几条线路并不是很美观，需要自己动态的调整一下，看下两种写法：
第一种：所有节点均指定相同的出入连接点，关键属性:fromSpot、toSpot
可选值 :Top、 Bottom、Right 、Left 是从节点对应方向的center开始连接， 也可以指定角: TopRight、 TopLeft、BottomRight、BottomLeft
myDiagram.linkTemplate = $(
go.Link,
{
// routing, corner, curve....等属性
fromSpot: go.Spot.Top, // 从上出
toSpot: go.Spot.Bottom // 从下入
},
);
第二种： 根据不同的属性，动态绑定，关键属性:fromSpot、toSpot,关键方法：go.Binding
myDiagram.linkTemplate = $(
go.Link,
{
// routing, corner, curve....等属性
},
new go.Binding("toSpot",'linkto',()=>go.Spot.Top), // 回调函数 返回具体连接点位置
);
var linkDataArray = [
{ from: "A", to: "B",linkto:'Top'}, // 属性名随便，值也随便，上边回调判断的是，linkto字段有没有值
{ from: "B", to: "C",,linkto:'Top'},
];
23. 给节点设置连线端口spot
myDiagram.nodeTemplate =$(
go.Node,
'Auto',
$(
go.Shape,
'RoundedRectangle',
{ fill: '#eee', parameter1: 5, opacity: 0.7, stroke: '#eee' },
),
// 其他Panel / Shape / TextBlock 零件配置
$(go.Panel, 'Vertical', { alignment: go.Spot.TopLeft }, makePort('1')),
$(go.Panel, 'Vertical', { alignment: go.Spot.TopRight }, makePort('2'))
)
nodeDataArray = [{ key: 'A' },{ key: 'B' }]
linkDataArray = [{ from: 'A', to: 'B', frompid: '1', topid: '2'}]
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
myDiagram.model.linkFromPortIdProperty = 'frompid' // 1
myDiagram.model.linkToPortIdProperty = 'topid' // 2
// 创建端口
function makePort(name) {
var port = $(go.Shape, 'Rectangle', {
fill: 'transparent',
stroke: null,
desiredSize: new go.Size(8, 8),
portId: name,
toMaxLinks: 3,
cursor: 'pointer'
},
new go.Binding('fromSpot', 'xxx', () => go.Spot.Right),
new go.Binding('toSpot', 'xxx', () => go.Spot.Left)
)
var panel = $(go.Panel, 'Horizontal', { margin: new go.Margin(8, 0) })
panel.add(port)
return panel
}
24. 设置折叠面板及部分默认样式
$('PanelExpanderButton', 'COLLAPSIBLE', {
alignment: go.Spot.Right,
_buttonExpandedFigure: 'M0 0 L8 0',
_buttonCollapsedFigure: 'M0 0 L8 0 M4 -4 L4 4',
'ButtonBorder.fill': '#fff',
'ButtonBorder.stroke': '#fff',
width: 15,
height: 15,
margin: 3,
})
25. itemArray 抽离封装引用，面板中设置表格，并给表格设置边框
// 表格数据，用于下方面板中
var fieldTemplate = $(
go.Panel,
'TableRow',
$(
go.TextBlock,
{
margin: new go.Margin(3, 5),
column: 1, // 表格第一列
font: '13px sans-serif',
alignment: go.Spot.Left
},
new go.Binding('text', 'name')
),
$(
go.TextBlock,
{
margin: new go.Margin(3, 5),
column: 2, // 表格第二列
font: 'bold 13px sans-serif',
alignment: go.Spot.Left
},
new go.Binding('text', 'age'),
)
);
// 表格面板
$(
go.Panel,
'Table',
{
name: 'COLLAPSIBLE',
stretch: go.GraphObject.Horizontal,
background: 'white',
defaultAlignment: go.Spot.Left,
itemTemplate: fieldTemplate,
defaultColumnSeparatorStroke: '#ccc', // 列边框
defaultRowSeparatorStroke: '#ccc' // 行边框
},
new go.Binding('itemArray', 'dataList')
)
26. 设置渐变色
const pinkbluegrad= $(go.Brush, 'Linear', { 0: '#F48FB1', 1: '#90CAF9' }) // 粉蓝渐变
$(go.Shape, "Rectangle",{ desiredSize: new go.Size(30, 30), fill: pinkbluegrad, margin: 5 }),
27. 与端口相邻的链路段的长度
myDiagram.linkTemplate = $(
go.Link,
{
// routing ,corner ,... ,
fromEndSegmentLength: 40,
toEndSegmentLength:40
})
28. 设置/关闭选中效果
选中效果，就是节点外层有一层蓝色的边框， 选中的样式也是可以自定义的，详细可以查看下文档，因为我没有用到，所以就没进行记录。
myDiagram.select(myDiagram.findNodeForKey(key)) // 设置选中节点
$( go.Node, 'auto', { selectionAdorned: false}) // 关闭选中节点
29. 画布垂直水平居中
尽量能够保证在画布init之后，在执行，可以在外层加一个定时器
myDiagram.alignDocument(go.Spot.Center, go.Spot.Center)
myDiagram.contentAlignment = go.Spot.Default
myDiagram.commandHandler.scrollToPart(diagram.findNodeForKey(key))
30. 将某一个节点聚焦至画布中心
myDiagram.commandHandler.scrollToPart(myDiagram.findNodeForKey(key))
31. button使用和修改默认样式
还有更多的自定义样式，可以去button.js源码中查看。
$(
'Button',
{
'ButtonBorder.fill': 'white',
'ButtonBorder.stroke': 'white',
_buttonFillOver: '#E0E0E0',
_buttonStrokeOver: '#E0E0E0',
cursor: 'pointer',
maxSize: new go.Size(100, NaN),
minSize: new go.Size(60, NaN),
click: ()=>{} // 建议单独抽离为一个函数
},
$(go.TextBlock, new go.Binding('text'))
),
