jsplumb创建垂直线

以下是使用jsplumb创建垂直线的示例代码：

jsPlumb.ready(function() {
  // 创建一个jsPlumb实例
  var instance = jsPlumb.getInstance();

  // 设置连接线的默认样式
  var connectorPaintStyle = {
    lineWidth: 2,
    strokeStyle: "#61B7CF",
    joinstyle: "round",
    outlineColor: "white",
    outlineWidth: 2
  };

  // 设置连接点的默认样式
  var endpointStyle = {
    endpoint: "Dot",
    paintStyle: {
      strokeStyle: "#7AB02C",
      fillStyle: "transparent",
      radius: 7,
      lineWidth: 2
    },
    isSource: true,
    connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
    connectorStyle: connectorPaintStyle,
    hoverPaintStyle: endpointHoverStyle,
    connectorHoverStyle: connectorHoverStyle,    dragOptions: {},
    overlays: [
      ["Label", {
        location: [0.5, 1.5],
        label: "Drag",
        cssClass: "endpointSourceLabel",
        visible:false
      }]
    ]
  };

  // 设置连接点的悬停样式
  var endpointHoverStyle = {
    endpoint: "Dot",
    paintStyle: { fillStyle: "#7AB02C" },
    hoverPaintStyle: { fillStyle: "#216477" },
    isSource: true,
    connectorHoverStyle: connectorHoverStyle,
    dragOptions: {},
    overlays: [
      ["Label", {
        location: [0.5, 1.5],
        label: "Drag",
        cssClass: "endpointSourceLabel",
        visible:false
      }]
    ]
  };

  // 设置连接线的悬停样式
  var connectorHoverStyle = {
    lineWidth: 4,
    strokeStyle: "#216477",
    outlineWidth: 2,
    outlineColor: "white"
  };

  // 创建连接点
  var sourceEndpoint = instance.addEndpoint("source", {
    anchor: "BottomCenter"
  }, endpointStyle);

  var targetEndpoint = instance.addEndpoint("target", {
    anchor: "TopCenter"
  }, endpointStyle);

  // 创建连接线
  var connection = instance.connect({
    source: sourceEndpoint,
    target: targetEndpoint,
    paintStyle: connectorPaintStyle,
    hoverPaintStyle: connectorHoverStyle,
    overlays: [
      ["Arrow", {
        location: 1,
        visible: true,
        width: 11,
        length: 11,
        id: "ARROW",
        events: {
          click: function() { alert("you clicked on the arrow overlay")}
        }
      }],
      ["Label", {
        location: 0.1,
        id: "label",
        cssClass: "aLabel",
        events:{
          tap:function() { alert("hey"); }
        }
      }]
    ],
    detachable: false
  });

  // 创建垂直线
  var verticalLine = instance.connect({
    source: [sourceEndpoint.getAnchor(), [sourceEndpoint.getAnchor()[0], targetEndpoint.getAnchor()[1]]],
    target: [targetEndpoint.getAnchor(), [sourceEndpoint.getAnchor()[0], targetEndpoint.getAnchor()[1]]],
    paintStyle: connectorPaintStyle,
    detachable: false
  });
});

在上面的代码中，我们首先创建了一个jsPlumb实例，然后设置了连接线和连接点的默认样式。接着，我们创建了两个连接点，一个位于源元素的底部中心，另一个位于目标元素的顶部中心。然后，我们使用`instance.connect()`方法创建了一条连接线，并设置了箭头和标签。最后，我们使用`instance.connect()`方法创建了一条垂直线，该线的起点和终点分别为源元素和目标元素的中心点，但是终点的x坐标与起点相同，y坐标与目标元素的中心点相同，从而实现了垂直线的效果。