78
写一下自定义节点和自定义边
const { Rect, Edge } = Shape
...
//graph属性里面connector加了smooth改变线条
connecting: {
snap: {
radius: 30
},
allowLoop: false,
allowEdge: false,
allowBlank: false,
allowMulti: false,
// allowNode: false,
highlight: true,
connector: {
name: 'smooth'
}
}
...
Edge.config({
attrs: {
line: {
stroke: '#7c68fc' // 指定 path 元素的填充色
}
}
})
Graph.registerNode('flow-chart-image-rect1', {
inherit: 'image-embedded',
width: 120,
height: 40,
ports: {
groups: {
group1: {
position: 'bottom'
}
},
items: [
{
group: 'group1',
attrs: {
circle: {
r: 0,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff'
}
}
}
]
},
attrs: {
text: { text: 'img' },
image: {
'xlink:href':
'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
// 'xlink:href': require('../assets/image/loginBack.png'),
// width: 110
// height: 40,
// x: 110
// y: 12
}
}
})
...
const img = this.graph.createNode({ shape: 'flow-chart-image-rect1' })
this.stencil.load([img], 'group2')