给一个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事件处理删除。如果任何人有任何想法如何做到这一点，将不胜感激。

答

从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; 
}

答

您可以设置一个无形的轮廓（阿尔法= 0）到每个连接器：

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

个

参考文献：

https://jsplumbtoolkit.com/doc/paint-styles.html
https://jsplumbtoolkit.com/doc/defaults.html

给一个JsPlumb连接一个隐形边框

相关推荐