jointjs - 强制链接连接器位于 jointjs 中单元格的一个位置

Question

如何使链接在 1 点内保持与单元或端口的连接？

如果端口是圆形，则当单元移动时，与其连接的链路端会移动穿过该圆形。

我希望能够使其保持在同一点 - 圆边缘的中心。

期望:

当我向下移动单元格时会发生什么:

谢谢。

Answer 1

如果有人感兴趣，我用以下方法解决了这个问题:

使用 2 个形状。

• 端口形状
• 磁铁，这是一个半径为 1 的圆(使其成为一个点)

端口标记:

<g class="port port<%= id %>">
    <path class="port-body port-magnet"/>
    <path class="port-body port-shape"/>
    <text class="port-label"/>
</g>

和属性:

'.outPorts .port-shape': {
    d: circleFromPath(5)
},
'.outPorts .port-magnet': {
    magnet: true
},
'.port-magnet': {
    visibility: 'hidden',
    d: circleFromPath(1),
    transform: 'translate(4, 1)'
}

circleFromPath() id 是一个自定义函数，它接受一个圆参数并返回由 path 生成的具有所提供半径的圆的 SVG ( CoffeeScript:

circleFromPath = (r = 5) ->
        d = r * 2
        """
            M 0, 0
            m #{-r}, 0
            a #{r},#{r} 0 1,0 #{d},0
            a #{r},#{r} 0 1,0 #{-d},0
        """