antvis/G6
The issue has been closed
Custom edges use third-order Bezier curves in the horizontal direction, how should the path path be written #6305
ltdys posted onGitHub
Describe the bug / 问题描述
G6.registerEdge('flow-line', {
draw(cfg, group) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
// 计算边的中点
const midPoint = {
x: (startPoint.x + endPoint.x) / 2,
y: (startPoint.y + endPoint.y) / 2,
};
const { style } = cfg;
const shape = group.addShape('path', {
attrs: {
stroke: style.stroke,
endArrow: style.endArrow,
lineDash: cfg.targetNode.getModel().showType === 'D' ? [5] : [0], // 控制实线还是虚线 sourceNode
path: [
['M', startPoint.x, startPoint.y],
// ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
// ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, endPoint.y],
],
},
});
const effectValue = self.graph.findById(cfg.target).getModel().effectValue
if (effectValue !== '' && effectValue !== null && effectValue !== undefined) {
let effectValueText = ''
let effectValuefill = ''
if (Number(effectValue) >= 0) {
effectValueText = `+${effectValue}%`
effectValuefill = '#00B85C'
} else {
effectValueText = `${effectValue}%`
effectValuefill = '#FF0000'
}
// 在边中间添加label
group.addShape('text', {
attrs: {
text: effectValueText, // 假设边配置中包含label字段
x: midPoint.x,
y: midPoint.y,
textAlign: 'center',
textBaseline: 'middle',
fill: effectValuefill,
fontSize: 12,
visible: false,
opacity: 0
},
name: 'edge-label',
});
}
return shape;
},
update: undefined
}, 'cubic-horizontal');
添加update:undefined后,registerEdge的第三个参数cubic-horizontal无效了。实现cubic-horizontal的path路径应该怎么写?
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
无
G6 Version / G6 版本
4.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
无