antvis/G6

The issue has been closed
When using registerEdge and update is undefined, how do you draw a custom edge of type cubic-horizontal #6307
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 || 100
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: 1
},
name: 'edge-label',
});
}
return shape;
},
update: undefined
}, 'cubic-horizontal');
代码如上,我使用自定义边。将update设置为undefined后,边的类型cubic-horizontal不生效。path怎么写才能跟cubic-horizontal的效果保持一致?还是有别的方法可以全cubic-horizontal生效。如果update不设置undefined,边的效果是生效的,但是添加的label在图形变化时位置会错位,有办法解决这个问题吗?
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
G6 Version / G6 版本
4.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
求解