Question

我正在将使用jointjs v0.9的旧代码迁移到最新版本（2.2.1）。代码的这一部分创建了一个简单的链接，该链接的末尾带有一个小圆圈（目标标记），但是在最新版本中，此代码不起作用：

 link = new Joint.dia.Link({
    source: { x: x, y: 0 }
    target: { x: x, y: y }
    markup: '<path class="connection" d="M 0 0 0 0"/><circle r="5" />'
    attrs: { '.connection': `connection ${this.getStyleClass()}`
 })

如何创建一个以圆圈为目标标记的Join.dia.link链接？

Answer 1

var link = new joint.dia.Link({
    source: {
        id: srcId
    },
    target: {
        id: destId
    }, 
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    toolMarkup: "none"
});
link.attr({
    '.marker-target': { fill: 'red', d: 'M 0, 0 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0', stroke: 'none' },
    '.connection': { stroke: 'red', 'stroke-width': '1px' },
    '.marker-arrowheads': { display: "none" }
});

在此 d中：'M 0，0 m -5，0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0'圈到链接的末尾。如果需要其他形状，可以编写其路径代码并在此处进行设置。

如何使jointjs.dia.link绕成一圈？

1 个答案: