給一個JsPlumb連接一個隱形邊框

我一直在遇到一個問題，點擊JsPlumb連接。在我的應用程序中，用戶可以繪製JsPlumb對象之間的連接，並通過單擊連接並在刪除提示上進行確認來刪除它們。給一個JsPlumb連接一個隱形邊框

我遇到的具體問題是連接太薄而無法輕鬆點擊（特別是在移動設備上，對於此應用程序也是針對此目標的），但出於設計原因，這些連接不能放大。

我正在研究的解決方案是在每個連接周圍創建一種不可見的緩衝區，以使用戶在選擇它們時有一點餘地。然而，我一直在研究如何做到這一點，而我一直未能拿出任何東西。

這裏是我的JsPlumb默認：

jsPlumb.importDefaults({ 
    Anchors: [ 
     ["Perimeter", { 
      shape: "Rectangle" 
     }], 
     ["Perimeter", { 
      shape: "Rectangle" 
     }] 
    ], 
    Connector: ["Straight"], 
    ConnectionsDetachable: false, 
    ConnectionOverlays: [ 
     ["Arrow", { 
      width: 8, 
      length: 15, 
      location: 1 
     }], 
     ["Label", { 
      label: '0', 
      id: "distanceLabel", 
      cssClass: "distance-label" 
     }] 
    ], 
    DoNotThrowErrors: false 
});

我敢肯定，我不希望添加元素的連接之上，因爲我還是想用JsPlumb click事件處理刪除。如果任何人有任何想法如何做到這一點，將不勝感激。

來源

2014-10-29 Dan McElroy

從API的我找不到任何設置連接邊框的選項。嘗試使用連接標籤來解決問題。用戶點擊標籤時連接將被刪除。

FIDDLE LINK

您可以在默認的設置標籤：

jsPlumb.importDefaults({ 
    ConnectionOverlays: [["Label", { 
     cssClass:"component", 
     label : "<div class='DCon'><div>", 
     location:0.4, 
     id:"label", 
     events:{ 
     "click": function(label, evt) { 
      jsPlumb.detach(label.component); 
     }, 
     "mouseenter": function(label, evt) { 
      label.component.setPaintStyle({lineWidth:1,strokeStyle:"#FF0040"}); 
     }, 
     "mouseexit": function(label, evt) { // Try "mouseleave" if this doesn't work. 
      label.component.setPaintStyle({lineWidth:1,strokeStyle:"gray"}); 
     } 
     } 
    }] 
});

我指定的CSS標籤圖像：

.DCon { 
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTk2D-dANCTuefhUI8C9Q3krWq5-J0tZpeSPY65Qc6bUuZLz1Uj); 
    background-size: 100% 100%; 
    cursor:pointer; 
    background-repeat: no-repeat; 
    height: 15px; 
    width: 15px; 
}

來源

2014-10-30 03:48:29 MrNobody

您可以設置一個無形的輪廓（阿爾法= 0）到每個連接器：

PaintStyle: 
{ 
    outlineColor:"rgba(255,255,255,0)", 
    outlineWidth:10 
}

個

參考文獻：

來源

2014-11-26 08:07:19

給一個JsPlumb連接一個隱形邊框

回答

相關問題