Question

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

Answer 1

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

Answer 2

您可以为每个连接器设置一个不可见的轮廓（alpha = 0）：

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

参考文献：

为JsPlumb连接提供一个不可见的边框

2 个答案: