联合 js link 圆形和三角形

Question

我需要在 Joint JS 中创建一些以圆形源开始并以三角形结束或反之亦然的链接，明白了，但它不起作用：

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

最终结果如下所示：

Answer 2

var link1 = new joint.dia.Link({
    source: { id: rect1.id }, target: { id: rect3.id },
    vertices: [{ x: 400, y: 250 }],
    attrs: {'.connection': { stroke: '#7c68fc', 'stroke-width': 20 },
    '.marker-source': { fill: '#232E78', stroke: '#4b4a67', d: 'M 10 0 L 0 5 L 10 10 z'},
        '.marker-target': { fill: '#232E78', stroke: '#4b4a67', d: 'M 10 0 L 0 5 L 10 10 z' } 
}      
});

联合 js link 圆形和三角形

Joint js link circle and triangle shapes

javascript

jointjs