mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 04:38:55 +08:00
261 lines
6.4 KiB
HTML
261 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>图片节点</title>
|
||
</head>
|
||
|
||
<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,
|
||
},
|
||
});
|
||
group.addShape('image', {
|
||
attrs: {
|
||
x: 0 - 15,
|
||
y: 0 - 22,
|
||
width: 100,
|
||
height: 100,
|
||
img:
|
||
'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/APP.png',
|
||
},
|
||
});
|
||
group.addShape('text', {
|
||
attrs: {
|
||
x: 15,
|
||
y: 85,
|
||
text: 'HSF',
|
||
fontSize: 15,
|
||
stroke: 'black',
|
||
},
|
||
});
|
||
group.addShape('text', {
|
||
attrs: {
|
||
x: 35,
|
||
y: 100,
|
||
text: cfg.id,
|
||
fontSize: 13,
|
||
stroke: 'black',
|
||
textAlign: 'center',
|
||
textBaseline: 'top',
|
||
},
|
||
});
|
||
return group;
|
||
},
|
||
});
|
||
G6.registerNode('tair', {
|
||
draw(cfg, group) {
|
||
group.addShape('image', {
|
||
attrs: {
|
||
x: 0,
|
||
y: 0,
|
||
img:
|
||
'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
|
||
},
|
||
});
|
||
group.addShape('text', {
|
||
attrs: {
|
||
x: 55,
|
||
y: 120,
|
||
text: model.pid,
|
||
fontSize: 13,
|
||
stroke: 'black',
|
||
textAlign: 'center',
|
||
textBaseline: 'top',
|
||
},
|
||
});
|
||
return group;
|
||
},
|
||
});
|
||
G6.registerNode('tddl', {
|
||
draw(cfg, group) {
|
||
group.addShape('circle', {
|
||
attrs: {
|
||
x: 36,
|
||
y: 40,
|
||
r: 55,
|
||
fill: '#73c4ff',
|
||
stroke: '#73c4ff',
|
||
lineWidth: 5,
|
||
},
|
||
});
|
||
group.addShape('text', {
|
||
attrs: {
|
||
x: 30,
|
||
y: 35,
|
||
textAlign: 'center',
|
||
textBaseline: 'top',
|
||
text: model.pid,
|
||
fontSize: 13,
|
||
stroke: 'black',
|
||
},
|
||
});
|
||
return group;
|
||
},
|
||
});
|
||
const data = {
|
||
nodes: [
|
||
{
|
||
id: 'node1',
|
||
x: 100,
|
||
y: 200,
|
||
shape: 'hsf',
|
||
},
|
||
{
|
||
id: 'node2',
|
||
x: 300,
|
||
y: 200,
|
||
size: 50,
|
||
label: '萧庆',
|
||
labelCfg: {
|
||
position: 'bottom',
|
||
},
|
||
shape: 'image',
|
||
img: 'https://img2.bosszhipin.com/boss/avatar/avatar_13.png',
|
||
},
|
||
{
|
||
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',
|
||
},
|
||
],
|
||
edges: [
|
||
{
|
||
id: 'edge1',
|
||
target: 'node2',
|
||
source: 'node1',
|
||
style: {
|
||
endArrow: true,
|
||
},
|
||
label: '你好,我好',
|
||
labelCfg: {
|
||
style: {
|
||
stroke: 'white',
|
||
lineWidth: 5,
|
||
}, // 加白边框
|
||
},
|
||
},
|
||
{
|
||
source: 'node2',
|
||
target: 'node3',
|
||
style: {
|
||
endArrow: true,
|
||
},
|
||
shape: 'quadratic',
|
||
label: '过去的线',
|
||
labelCfg: {
|
||
refY: -10,
|
||
refX: 0,
|
||
autoRotate: true,
|
||
style: {
|
||
fill: 'red',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
source: 'node3',
|
||
target: 'node2',
|
||
style: {
|
||
endArrow: true,
|
||
stroke: 'red',
|
||
},
|
||
size: 2,
|
||
shape: 'quadratic',
|
||
label: '回来的线',
|
||
labelCfg: {
|
||
refY: -10,
|
||
refX: 0,
|
||
autoRotate: true,
|
||
style: {
|
||
fill: 'red',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
source: 'node3',
|
||
target: 'node4',
|
||
style: {
|
||
endArrow: true,
|
||
stroke: 'blue',
|
||
lineDash: [2, 2],
|
||
},
|
||
shape: 'my-edge',
|
||
label: '随便连连\n换行',
|
||
curveLevel: 4,
|
||
labelCfg: {
|
||
refY: -20,
|
||
refX: 0,
|
||
autoRotate: true,
|
||
style: {
|
||
fill: 'red',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
// 为了定制曲线的曲度，所以需要复写默认的边，额外增加 level 字段，进行设置曲度
|
||
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;
|
||
},
|
||
},
|
||
'quadratic',
|
||
);
|
||
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 1000,
|
||
height: 600,
|
||
modes: {
|
||
default: ['drag-node', 'click-select'],
|
||
},
|
||
});
|
||
graph.on('node:click', e => {
|
||
console.log(e);
|
||
});
|
||
graph.data(data);
|
||
|
||
graph.render();
|
||
|
||
graph.on('node:click', ev => {
|
||
console.log(ev);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|