Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JointJs:指向圆形的链接的行为与预期不符_Javascript_Svg_Jointjs - Fatal编程技术网

Javascript JointJs:指向圆形的链接的行为与预期不符

Javascript JointJs:指向圆形的链接的行为与预期不符,javascript,svg,jointjs,Javascript,Svg,Jointjs,我目前正在为我即将到来的项目寻找一个合适的库,在这个项目中,我必须创建一个可以创建数据流图的应用程序。在我的研究中,我接触了JointJs,我也已经用它创建了一些原型。到目前为止看起来不错,但有一件事我需要一些帮助 因此,该应用程序将在移动设备上运行,这就是为什么我不想使用端口,而是能够使用整个形状作为磁铁,并在纸上绘制到其他形状的链接。这会导致链接在连接到圆形时表现出这种奇怪的行为(请参见) 这是我在图中示例中用于将圆形状添加到纸张的函数: function addProcess() {

我目前正在为我即将到来的项目寻找一个合适的库,在这个项目中,我必须创建一个可以创建数据流图的应用程序。在我的研究中,我接触了JointJs,我也已经用它创建了一些原型。到目前为止看起来不错,但有一件事我需要一些帮助

因此,该应用程序将在移动设备上运行,这就是为什么我不想使用端口,而是能够使用整个形状作为磁铁,并在纸上绘制到其他形状的链接。这会导致链接在连接到圆形时表现出这种奇怪的行为(请参见)

这是我在图中示例中用于将圆形状添加到纸张的函数:

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开始/结束。同样,以下文件中的所有内容: