JointJs：與預期不同的圓形鏈接

Question

我目前正在為我即將到來的項目尋找一個合適的庫，我必須創建一個可以創建數據流圖的應用程序。 在我的研究中，我接觸了 JointJs，我也已經用它創建了一些原型。 到目前為止看起來不錯，但有一件事我需要一些幫助。

所以該應用程序將在移動設備上運行，這就是為什么我不想使用端口，而是使用整個形狀作為磁鐵並在紙上繪制到其他形狀的鏈接的能力。 這會導致鏈接在將它們連接到圓形時以這種奇怪的方式表現（參見這張圖片）。

這是我在圖示示例中使用的 function 將圓形添加到紙上：

function addProcess() {
    var c = new joint.shapes.standard.Circle({
        position: { x: 80, y: 80 },
        size: { width: 100, height: 100 }
    });
    graph.addCells([c]);
}

有誰知道如何解決或規避這個問題？ 我還考慮過可能在創建鏈接時將其引導到它所連接的形狀上的預定義位置（頂部、底部、左側、右側）。

任何幫助是極大的贊賞。

編輯：

我找到了使用jointJs錨功能的解決方法（如文檔-> https://resources.jointjs.com/docs/jointjs/v3.2/joint.html中所述）。 所以我剛剛添加

paper.options.defaultAnchor = {
    name: 'midSide',
    args: {
        rotate: true
    }
};

現在它會自動將鏈接的錨點設置到每個元素側面的中間。 雖然我認為這不是完美的解決方案，但它絕對可以完成工作。 我仍然保留這個問題，以防有人找到更好的解決方案。

Answer 1

好的，結果證明完美的解決方案是簡單地更改紙張選項中的 defaultConnectionPoint：

defaultConnectionPoint: {
    name: 'boundary'
},

這樣，所有鏈接都在形狀本身上開始/結束，而不是周圍的 bbox。 同樣，所有在文檔下： https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#connectionPoints.intro

Answer 2

link.source(start, { connectionPoint: { name: 'boundary' } }); link.target(end, { connectionPoint: { name: 'boundary' } });