javascript - 联合js链接圆形和三 Angular 形

Question

我需要在 Joint JS 中创建一些以圆形源开头并以三 Angular 形结尾的链接，反之亦然，得到了这个，但它不起作用:

var link1 = new joint.dia.Link({
    source: { id: rect1.id },
    target: { id: rect3.id },
    attrs: {
        '.connection': { 'stroke-width': 20 },
        '.marker-source': { d: 'M 0 0 5 0 5 20 0 20 z', fill: '#232E78' },
        '.marker-target': { d: 'M 0 0 5 0 5 20 0 20 z', fill: '#232E78' }
    }
});

有什么想法吗？提前谢谢!

Answer 1

尝试这样的事情。您可以根据需要调整路径的大小:

var link1 = new joint.dia.Link({
    source: { id: rect1.id },
    target: { id: rect3.id },
    attrs:           attrs: {
      '.connection': { 'stroke-width': 2 },
      '.marker-source': { d: 'M 0 0 a 5 5 0 1 0 0 1', 'stroke-width': 0, fill: '#232E78' },
      '.marker-target': { d: 'M 10 -5 10 5 0 0 z', 'stroke-width': 0, fill: '#232E78' }
            }
});

有关完整详细信息，请参阅 this fiddle

最终结果如下所示: