Question

我想在链接中自我引用一个形状。基本上链接的来源和目标是相同的。

它正在工作，但链接被形状隐藏： https://imageshack.com/i/f2mu7jp

以下是我想做的事情： https://imageshack.com/i/mujp9lp

我知道我可以在链接的定义中使用“顶点”，但我不知道起点和终点的XY位置

var connect = function(source, sourcePort, target, targetPort) {
    var link = new joint.shapes.devs.Link({
        source: { id: source.id, selector: source.getPortSelector(sourcePort) },
        target: { id: target.id, selector: target.getPortSelector(targetPort) }
    });
    if(source == target){
        console.log(link);
        console.log(source);
    }

    graph.addCell(link);
};

如何获得起点和终点的位置？

谢谢

Answer 1

它不在官方API中，但链接视图上有getConnectionPoint()方法。通过了解连接点，您可以计算自链接所需的2个顶点：

...在graph.addCell（链接）之后... - 此时链接视图在论文中创建...

var linkView = paper.findViewByModel(link);
var sourcePoint = linkView.getConnectionPoint(
    'source', 
    link.get('source'),
    _.first(link.get('vertices')) || link.get('target'));
var targetPoint = linkView.getConnectionPoint(
    'target',
    link.get('target'),
    _.last(link.get('vertices')) || sourcePoint);

...现在你可以计算其他2个顶点（用于正交自连接）并执行：

link.set('vertices', myTwoVertexArray);

getConnectionPoint（）方法的签名是：

getConnectionPoint(end, sourceOrTargetOrPoint, referenceSourceOrTargetOrPoint);

end为'source'或'target'，sourceOrTargetOrPoint为link.get('source')或link.get('target')且referenceSourceOrTargetOrPoint为参考计算“粘性”点（通常是链接的另一侧或最近的顶点）所需的点。

JOINTJS：自我引用链接中的形状

1 个答案: