给我一个jsPlumb 如何设置丝滑连线完整的例子
时间: 2023-04-06 12:01:56 浏览: 84
你可以参考以下代码实现:
```javascript
// 初始化 jsPlumb
jsPlumb.ready(function() {
// 设置连接线的样式
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
},
hoverPaintStyle: {
fillStyle: "#216477",
strokeStyle: "#216477"
},
connectorHoverStyle: {
lineWidth: 2,
strokeStyle: "#216477"
},
connectorStyle: connectorPaintStyle,
maxConnections: -1
};
// 初始化连接器
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", { radius: 2 }],
Connector: "StateMachine",
HoverPaintStyle: { strokeStyle: "#216477", lineWidth: 2 },
ConnectionOverlays: [
[
"Arrow",
{
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}
],
[
"Label",
{
location: 0.1,
id: "label",
cssClass: "aLabel"
}
]
],
Container: "canvas"
});
// 设置连接点
var sourceEndpoint = {
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,
maxConnections: -1,
connectorHoverStyle: connectorPaintStyle,
dragOptions: {},
overlays: [
[
"Label",
{
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible: false
}
]
]
};
var targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 7 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[
"Label",
{
location: [0.5, -0.5],
label: "Drop",
cssClass: "endpointTargetLabel",
visible: false
}
]
]
};
// 添加连接点
instance.addEndpoint("source", sourceEndpoint);
instance.addEndpoint("target", targetEndpoint);
// 连接两个连接点
instance.connect({
source: "source",
target: "target",
overlays: [["Label", { label: "Connection", id: "label", visible: false }]]
});
});
```