recently I tried to make a flow graph component by myself, but the connection drawn is too rough. Ask the old driver for advice on how to optimize it.
<!-- -->
<g>
<g v-for="(line, i) in lines" :key="i">
<path :d="drawLine(line)" fill="none" marker-end="url(-sharparrow)" stroke-width="2px" />
</g>
</g>
drawLine(line){
let node1 = this.nodes[line[0]], node2 = this.nodes[line[1]];
const MARGIN = 50;
const NODE_LINE_GAP = 8; //816
let startX = node1.x+node1.width;
let startY = node1.y+(node1.height/2);
let targetX = node2.x-NODE_LINE_GAP;
let targetY = node2.y+(node2.height/2);
let x1 = startX+MARGIN;
let x2 = targetX-MARGIN;
let y1 = startY;
let y2 = targetY;
let x3 = (x1+x2)/2;
let y3 = y1;
let x4 = (x1+x2)/2;
let y4 = (y1+y2)/2;
//(startX,startY)(x1,y1),(x2,y2)(targetX,targetY)
return `M ${startX},${startY} L ${x1},${y1} Q ${x3},${y3} ${x4},${y4} T ${x2},${y2} L ${targetX},${targetY}`;
}
how to optimize the algorithm of wiring or the style of path elements?