2019-01-15 15:14:48 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
2019-09-24 11:30:15 +08:00
|
|
|
|
<head>
|
2020-02-14 10:10:54 +08:00
|
|
|
|
<meta charset="UTF-8" />
|
2019-09-24 11:30:15 +08:00
|
|
|
|
<title>图片节点</title>
|
|
|
|
|
|
</head>
|
2020-02-14 10:10:54 +08:00
|
|
|
|
|
2019-09-24 11:30:15 +08:00
|
|
|
|
<body>
|
|
|
|
|
|
<div id="mountNode"></div>
|
|
|
|
|
|
<script src="../build/g6.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const Util = G6.Util;
|
|
|
|
|
|
G6.registerNode('hsf', {
|
|
|
|
|
|
draw(cfg, group) {
|
|
|
|
|
|
group.addShape('circle', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 36,
|
|
|
|
|
|
y: 40,
|
|
|
|
|
|
r: 55,
|
|
|
|
|
|
stroke: '#71cd00',
|
|
|
|
|
|
lineWidth: 5,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
group.addShape('image', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0 - 15,
|
|
|
|
|
|
y: 0 - 22,
|
|
|
|
|
|
width: 100,
|
|
|
|
|
|
height: 100,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
img:
|
|
|
|
|
|
'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/APP.png',
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
group.addShape('text', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 15,
|
|
|
|
|
|
y: 85,
|
|
|
|
|
|
text: 'HSF',
|
|
|
|
|
|
fontSize: 15,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
stroke: 'black',
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
group.addShape('text', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 35,
|
|
|
|
|
|
y: 100,
|
|
|
|
|
|
text: cfg.id,
|
|
|
|
|
|
fontSize: 13,
|
|
|
|
|
|
stroke: 'black',
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
textBaseline: 'top',
|
2020-02-14 10:10:54 +08:00
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
return group;
|
2020-02-14 10:10:54 +08:00
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
G6.registerNode('tair', {
|
|
|
|
|
|
draw(cfg, group) {
|
|
|
|
|
|
group.addShape('image', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
img:
|
|
|
|
|
|
'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
group.addShape('text', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 55,
|
|
|
|
|
|
y: 120,
|
|
|
|
|
|
text: model.pid,
|
|
|
|
|
|
fontSize: 13,
|
|
|
|
|
|
stroke: 'black',
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
textBaseline: 'top',
|
2020-02-14 10:10:54 +08:00
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
|
return group;
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
G6.registerNode('tddl', {
|
|
|
|
|
|
draw(cfg, group) {
|
|
|
|
|
|
group.addShape('circle', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 36,
|
|
|
|
|
|
y: 40,
|
|
|
|
|
|
r: 55,
|
|
|
|
|
|
fill: '#73c4ff',
|
|
|
|
|
|
stroke: '#73c4ff',
|
|
|
|
|
|
lineWidth: 5,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
group.addShape('text', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 30,
|
|
|
|
|
|
y: 35,
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
textBaseline: 'top',
|
|
|
|
|
|
text: model.pid,
|
|
|
|
|
|
fontSize: 13,
|
2020-02-14 10:10:54 +08:00
|
|
|
|
stroke: 'black',
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
|
return group;
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
const data = {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
nodes: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node1',
|
|
|
|
|
|
x: 100,
|
|
|
|
|
|
y: 200,
|
|
|
|
|
|
shape: 'hsf',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
id: 'node2',
|
|
|
|
|
|
x: 300,
|
|
|
|
|
|
y: 200,
|
|
|
|
|
|
size: 50,
|
|
|
|
|
|
label: '萧庆',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
|
},
|
|
|
|
|
|
shape: 'image',
|
|
|
|
|
|
img: 'https://img2.bosszhipin.com/boss/avatar/avatar_13.png',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
id: 'node3',
|
|
|
|
|
|
x: 400,
|
|
|
|
|
|
y: 100,
|
|
|
|
|
|
size: 30,
|
|
|
|
|
|
shape: 'image',
|
|
|
|
|
|
label: '语雀',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
|
},
|
|
|
|
|
|
img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node4',
|
|
|
|
|
|
x: 400,
|
|
|
|
|
|
y: 400,
|
|
|
|
|
|
size: 50,
|
|
|
|
|
|
shape: 'image',
|
|
|
|
|
|
img: '//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
],
|
|
|
|
|
|
edges: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'edge1',
|
|
|
|
|
|
target: 'node2',
|
|
|
|
|
|
source: 'node1',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
style: {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
endArrow: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
label: '你好,我好',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
style: {
|
|
|
|
|
|
stroke: 'white',
|
|
|
|
|
|
lineWidth: 5,
|
|
|
|
|
|
}, // 加白边框
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
source: 'node2',
|
|
|
|
|
|
target: 'node3',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
style: {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
endArrow: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
shape: 'quadratic',
|
|
|
|
|
|
label: '过去的线',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
refY: -10,
|
|
|
|
|
|
refX: 0,
|
|
|
|
|
|
autoRotate: true,
|
|
|
|
|
|
style: {
|
|
|
|
|
|
fill: 'red',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
source: 'node3',
|
|
|
|
|
|
target: 'node2',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
style: {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
endArrow: true,
|
|
|
|
|
|
stroke: 'red',
|
|
|
|
|
|
},
|
|
|
|
|
|
size: 2,
|
|
|
|
|
|
shape: 'quadratic',
|
|
|
|
|
|
label: '回来的线',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
refY: -10,
|
|
|
|
|
|
refX: 0,
|
|
|
|
|
|
autoRotate: true,
|
|
|
|
|
|
style: {
|
|
|
|
|
|
fill: 'red',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
source: 'node3',
|
|
|
|
|
|
target: 'node4',
|
2019-09-24 11:30:15 +08:00
|
|
|
|
style: {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
endArrow: true,
|
|
|
|
|
|
stroke: 'blue',
|
|
|
|
|
|
lineDash: [2, 2],
|
|
|
|
|
|
},
|
|
|
|
|
|
shape: 'my-edge',
|
|
|
|
|
|
label: '随便连连\n换行',
|
|
|
|
|
|
curveLevel: 4,
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
refY: -20,
|
|
|
|
|
|
refX: 0,
|
|
|
|
|
|
autoRotate: true,
|
|
|
|
|
|
style: {
|
|
|
|
|
|
fill: 'red',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
2019-09-24 11:30:15 +08:00
|
|
|
|
};
|
|
|
|
|
|
// 为了定制曲线的曲度，所以需要复写默认的边，额外增加 level 字段，进行设置曲度
|
2020-02-14 10:10:54 +08:00
|
|
|
|
G6.registerEdge(
|
|
|
|
|
|
'my-edge',
|
|
|
|
|
|
{
|
|
|
|
|
|
// 复写控制点的逻辑
|
|
|
|
|
|
getControlPoints(cfg) {
|
|
|
|
|
|
const controlPoints = []; // 指定controlPoints
|
|
|
|
|
|
const level = cfg.curveLevel || 1; // 从 -10， 10
|
|
|
|
|
|
const offset = level * -20; // 根据不同的level 计算不同的偏移
|
|
|
|
|
|
const { startPoint, endPoint } = cfg;
|
|
|
|
|
|
const innerPoint = Util.getControlPoint(startPoint, endPoint, 0.5, offset);
|
|
|
|
|
|
controlPoints.push(innerPoint);
|
|
|
|
|
|
return controlPoints;
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
},
|
2020-02-14 10:10:54 +08:00
|
|
|
|
'quadratic',
|
|
|
|
|
|
);
|
2019-09-24 11:30:15 +08:00
|
|
|
|
|
|
|
|
|
|
const graph = new G6.Graph({
|
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
|
width: 1000,
|
|
|
|
|
|
height: 600,
|
|
|
|
|
|
modes: {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
default: ['drag-node', 'click-select'],
|
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
graph.on('node:click', e => {
|
2020-02-14 10:10:54 +08:00
|
|
|
|
console.log(e);
|
2019-09-24 11:30:15 +08:00
|
|
|
|
});
|
|
|
|
|
|
graph.data(data);
|
2019-01-15 15:14:48 +08:00
|
|
|
|
|
2019-09-24 11:30:15 +08:00
|
|
|
|
graph.render();
|
2019-01-15 15:14:48 +08:00
|
|
|
|
|
2019-09-24 11:30:15 +08:00
|
|
|
|
graph.on('node:click', ev => {
|
|
|
|
|
|
console.log(ev);
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2020-02-14 10:10:54 +08:00
|
|
|
|
</html>
|
