test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

arc edge

Browse Source
This commit is contained in:
shiwu.wyy 2019-08-07 20:08:06 +08:00
parent 154242e03d
commit afbc5440b7
2 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demos/test.html
View File

@ -26,13 +26,13 @@ const data = {
nodes: [{
id: 'node5',
x: 100,
y: 100,
y: 180,
label: '5',
size: 80
},{
id: 'node6',
x: 400,
y: 50,
y: 150,
label: '6',
size: 50
},{
@ -47,26 +47,28 @@ const data = {
source: 'node6',
target: 'node5',
shape: 'arc',
edgeOffset: -50
curveOffset: -150
},
{
source: 'node6',
target: 'node5',
shape: 'arc',
curveOffset: 50
},
{
source: 'node5',
target: 'node6',
shape: 'arc',
edgeOffset: 50
curveOffset: 50
},
{
source: 'node5',
target: 'node6',
source: 'node7',
target: 'node5',
shape: 'arc',
edgeOffset: -50
},
{
source: 'node5',
target: 'node7',
shape: 'arc',
edgeOffset: 50
}]
controlPoints: [{ x: 200, y: 315 }]
// controlPoints: [{ x: 350, y: 315 }]
}
]
};
const graph = new G6.Graph({
container: 'mountNode',

63
src/shape/edge.js
View File

@ -178,34 +178,59 @@ Shape.registerEdge('spline', {
}, 'single-line');
Shape.registerEdge('arc', {
curveOffset: 30,
curveOffset: 20,
clockwise: 1,
getControlPoints(cfg) {
const startPoint = cfg.sourceNode.getModel().x;
const endPoint = cfg.sourceNode.getModel().y;
const midPoint = {
x: (startPoint.x + endPoint.x) / 2,
y: (startPoint.y + endPoint.y) / 2
};
const vec = {
x: endPoint.x - startPoint.x,
y: endPoint.y - startPoint.y
};
const edgeAngle = Math.atan2(vec.y, vec.x);
const arcPoint = {
x: this.curveOffset * Math.cos((-Math.PI / 2 + edgeAngle)) + midPoint.x,
y: this.curveOffset * Math.sin((-Math.PI / 2 + edgeAngle)) + midPoint.y
};
const startPoint = { x: cfg.sourceNode.getModel().x, y: cfg.sourceNode.getModel().y };
const endPoint = { x: cfg.targetNode.getModel().x, y: cfg.targetNode.getModel().y };
let arcPoint;
// 根据给定点计算圆弧
if (cfg.controlPoints !== undefined) {
arcPoint = cfg.controlPoints[0];
// 根据控制点和直线关系决定 clockwise值
// 若给定点和两端点共线，无法生成圆弧，绘制直线
if ((arcPoint.x - startPoint.x) / (arcPoint.y - startPoint.y)
=== (endPoint.x - startPoint.x) / (endPoint.y - startPoint.y)) {
return [];
}
} else { // 根据直线连线中点的的偏移计算圆弧
// 若用户给定偏移量则根据其计算，否则按照默认偏移值计算
if (cfg.curveOffset !== undefined) {
this.curveOffset = cfg.curveOffset;
}
if (this.curveOffset < 0) this.clockwise = 0;
else this.clockwise = 1;
const midPoint = {
x: (startPoint.x + endPoint.x) / 2,
y: (startPoint.y + endPoint.y) / 2
};
const vec = {
x: endPoint.x - startPoint.x,
y: endPoint.y - startPoint.y
};
const edgeAngle = Math.atan2(vec.y, vec.x);
arcPoint = {
x: this.curveOffset * Math.cos((-Math.PI / 2 + edgeAngle)) + midPoint.x,
y: this.curveOffset * Math.sin((-Math.PI / 2 + edgeAngle)) + midPoint.y
};
}
const center = Util.getCircleCenterByPoints(startPoint, arcPoint, endPoint);
console.log('distance center controlpoint', Util.distance(center, arcPoint));
const radius = Util.distance(startPoint, center);
const controlPoints = [ startPoint, { x: radius, y: radius }, endPoint ];
console.log('radius', radius);
const controlPoints = [{ x: radius, y: radius }];
return controlPoints;
},
getPath(points) {
console.log(points);
const path = [];
path.push([ 'M', points[0].x, points[0].y ]);
path.push([ 'A', points[1].x, points[1].y, 0, 0, 0, points[2].x, points[2].y ]);
// 控制点与端点共线
if (points.length === 2) {
path.push([ 'L', points[1].x, points[1].y ]);
} else {
path.push([ 'A', points[1].x, points[1].y, 0, 0, this.clockwise, points[2].x, points[2].y ]);
}
return path;
}
}, 'single-line');