jsplumb 画线 中部显示删除图标 如何实现

JSPlumb是一个强大的JavaScript库，用于创建实时的、拖放式的网络连接和可视化元素。要在JSPlumb的连线中间添加一个删除图标并允许用户点击删除，你可以按照以下步骤操作：

1. **引入库**：首先确保已经引入了JSPlumb库及其依赖。

2. **配置连接样式**：在初始化JSPlumb时，可以设置连接的样式，包括线条路径。比如，你可以使用`_endpoint`选项指定自定义端点样式，其中包含一个图标区域。

jsPlumb.Defaults Endpoint = [ "Dot", { radius: 4 } ];
jsPlumb.Defaults.Connectors = [
    ["Flowchart", { orientation: -90 }],
    ["StraightConnection", { stub: [15, 15] }]
];

3. **自定义端点**：创建一个新端点类型，如`DeleteEndpoint`，并在其中插入删除图标。可以利用HTML `<img>`标签或其他CSS样式图标。

function DeleteEndpoint(params) {
    var endpoint = jsPlumb.getDefaultEndpointType()();
    endpoint._cssClass += ' delete-endpoint';
    // 添加删除图标
    endpoint.connector.append('<div class="delete-icon"></div>');
    return endpoint;
}

4. **启用删除事件**：监听鼠标点击事件，在`click`事件处理程序中检查是否在删除图标上点击，并执行相应的删除操作。

jsPlumb.bind("connectionMoved", function(conn) {
    if (conn.endpoints()[0].hasClass('delete-endpoint')) {
        conn.canvas().find('.delete-icon').on('click', function() {
            conn.detach();
        });
    }
});

5. **使用新的端点类型**：在连接的创建过程中，传入`DeleteEndpoint`作为端点类型。

jsPlumb.connect({
    source: sourceId,
    target: targetId,
    endpoints: ['DeleteEndpoint'],
});