Javascript JointJs:指向圆形的链接的行为与预期不符
我目前正在为我即将到来的项目寻找一个合适的库,在这个项目中,我必须创建一个可以创建数据流图的应用程序。在我的研究中,我接触了JointJs,我也已经用它创建了一些原型。到目前为止看起来不错,但有一件事我需要一些帮助 因此,该应用程序将在移动设备上运行,这就是为什么我不想使用端口,而是能够使用整个形状作为磁铁,并在纸上绘制到其他形状的链接。这会导致链接在连接到圆形时表现出这种奇怪的行为(请参见) 这是我在图中示例中用于将圆形状添加到纸张的函数:Javascript JointJs:指向圆形的链接的行为与预期不符,javascript,svg,jointjs,Javascript,Svg,Jointjs,我目前正在为我即将到来的项目寻找一个合适的库,在这个项目中,我必须创建一个可以创建数据流图的应用程序。在我的研究中,我接触了JointJs,我也已经用它创建了一些原型。到目前为止看起来不错,但有一件事我需要一些帮助 因此,该应用程序将在移动设备上运行,这就是为什么我不想使用端口,而是能够使用整个形状作为磁铁,并在纸上绘制到其他形状的链接。这会导致链接在连接到圆形时表现出这种奇怪的行为(请参见) 这是我在图中示例中用于将圆形状添加到纸张的函数: function addProcess() {
function addProcess() {
var c = new joint.shapes.standard.Circle({
position: { x: 80, y: 80 },
size: { width: 100, height: 100 }
});
graph.addCells([c]);
}
有人知道如何解决或规避这个问题吗?我还考虑了可能在创建链接时,将其引导到它所连接的形状上的预定义位置(顶部、底部、左侧、右侧)
非常感谢您的帮助
编辑:
我找到了jointJs anchor功能的解决方法(如文档->中所述)。所以我就加了一句
paper.options.defaultAnchor = {
name: 'midSide',
args: {
rotate: true
}
};
现在,它会自动将链接的锚定设置到每个元素侧面的中间。虽然我认为这不是一个完美的解决方案,但它肯定能完成任务。我仍然没有回答这个问题,以防有人找到更好的解决方案。好的,所以最好的解决方案是简单地更改纸张选项中的defaultConnectionPoint:
defaultConnectionPoint: {
name: 'boundary'
},
这样,所有链接都从形状本身开始/结束,而不是从周围的bbox开始/结束。同样,以下文件中的所有内容: