关节js链接圆和三角形

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' } 
}      
});