jsplumb基础

关注

转载最新推荐文章于 2026-05-12 09:10:39 发布 784 阅读 AI 写同款· GEO 优化 ›

jsPlumb初认识 hello，大家好，我是前端小老弟儿，最近老弟儿接到这样一个需求，实现一个流程图，可以连线，右键操作，以及删除连线等，如下所示得流程图。使用得插件是: jsPlumb；所以就简单的介绍一下jsPlumb基本使用什么是jsplumb jsPlumb是一个强大得JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue2.0 ，react和Angular 。 jsplumb 能干什么？该框架适用于必须回值图表得web 阅读详情

jsPlumb概述
jsPlumb是一个在dom元素之间绘制连接线的javascript框架，它使用svg技术绘制连接线。
基本概念
很明显，一个连线主要要解决的问题包括谁和谁连，在哪里连(连接点在哪里)，连接点长啥样，如何画线等问题
1：Anchor，锚点，它是一个逻辑概念，解决连线的连接点位置问题。
2：Endpoint，端点，它是一个可视化的点，解决连接点长啥样的问题
3：Connector，连线，解决如何画线的问题
4：Overlay，覆盖物，它主要为连接添加一些装饰物，不如标签文本，连接点的箭头。Anchor：
锚点的定义方式主要有下面几种
1：用数组来定义
[x位置，y位置，x方向，y方向]
[x位置，y位置，x方向，y方向，x像素偏移，y像素偏移]
位置的值在0~1之间
方向的值为0,1,-1
9个静态的值为：
Top TopRight
Right BottomRight
Bottom BottomLeft
Left TopLeft
Center
AutoDefault 包括Top, Right, Bottom, Left
需要注意的是，坐标使用第四象限的坐标
一个常用的组合是：
var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
, [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
2：几何图形的周边
Circle Ellipse Triangle Diamond Rectangle Square
anchor:[{ shape:"Triangle", anchorCount:150, rotation:25 } ]
3：连续
anchor:["Continuous", { faces:[ "top", "left" ] } ]
Endpoint：
jsPlumb提供了四种类型的端点，
Dot,Rectangle,
Blank，使用失败了。
Image，使用失败了。
Connectors
jsPlumb提供了四种类型的连线，
Bezier，StateMachine，Flowchart，Straight
Overlay
jsPlumb提供了3种类型的覆盖物，
Arrow：箭头
Label：标签
Custom：自定义的html元素
ConnectionOverlays: [
["Arrow", {
location: 1,
//foldback: 1,
foldback: 0.618, ///0.618：普通箭头，1：平底箭头，2：钻石箭头
visible: true,
id: "arrow"
}],
["Label", { location: 0.5,
cssClass: "endpointTargetLabel",
visible: true,
id: "label" }]
]
几个需要注意的地方：
1：所有的子元素在一个父容器中，并且子元素都要使用绝对布局
position: absolute;
2：端点可以通过样式隐藏，直接使用"Blank"报错了。
3：性能，在多个连接的时候，需要使用批处理模式来绘制。
sintoonUx.jsPlumbInstance.setSuspendDrawing(true)
sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
4：设置可拖拽
sintoonUx.jsPlumbInstance.draggable(btnDoms);

使用范例

drawConnectLine: function () {
    var sintoonUx = this;
    /// 定义锚点的位置
    var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
    , [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
    /// 创建实例，配置默认的绘制属性，建立通用绘图方式等
    sintoonUx.jsPlumbInstance = jsPlumb.getInstance({
        PaintStyle: {
            lineWidth: 2,
            strokeStyle: "blue",
            outlineColor: "blue",
            dashstyle: "4 2",
            outlineWidth: 1
        },
        // Connector: ["Bezier", { curviness: 30 }],
        // Connector: ["StateMachine"],
        // Connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
        Connector: ["Straight", { stub: [20, 50], gap: 0 }],
 
        Endpoint: ["Dot", { radius: 5, cssClass: "displaynone" }],/// 通过样式来隐藏锚点
        //Endpoint: ["Image ", { src: "http://rmadyq.sintoon.cn/Content/16Icons/arrow_right.png" }],/// 通过样式来隐藏锚点
        // Endpoint: ["Blank", "Blank"], 失败报错了，
        EndpointStyle: { fillStyle: "#567567" },
        Anchor: [defaultAnchors],
        // Anchor: ["Perimeter", { shape: "Triangle" }],
        Container: sintoonUx.flowchartContainerId,
        DragOptions: { cursor: 'pointer', zIndex: 2000 },
        ConnectionOverlays: [
            ["Arrow", {
                location: 1,
                //foldback: 1,
                foldback: 0.618,
                visible: true,
                id: "arrow"
            }],
            ["Label", { location: 0.5, label: "zhu", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
        ]
    });
 
    /// 绘制标签
    sintoonUx.jsPlumbInstance.bind("connection",
        function (connInfo, originalEvent) {
            var connection = connInfo.connection;
            var labelText = connection.sourceId.substring(0, 15) + "-" + connection.targetId.substring(0, 15);
            labelText = Ext.String.format("{0}---{1}", Ext.getCmp(connection.sourceId).flowStage,
                Ext.getCmp(connection.targetId).flowStage);
            connection.getOverlay("label").setLabel(labelText);
        });
 
    /// 批处理绘制
    sintoonUx.jsPlumbInstance.setSuspendDrawing(true);
    var searchPat = Ext.String.format("#{0} .btnDraggable", sintoonUx.flowchartContainerId);
    var btnDoms = sintoonUx.jsPlumbInstance.getSelector(searchPat);
 
    /// 设置dom元素的可拖拽性
    sintoonUx.jsPlumbInstance.draggable(btnDoms);
 
    /// 建立dom元素之间的连接，绘制连接线，锚点，覆盖物等
    for (var i = 0; i < sintoonUx.btnConfigs.length - 1; i++) {
        sintoonUx.jsPlumbInstance.connect({ reattach: true, source: sintoonUx.btnConfigs[i].btnId, target: sintoonUx.btnConfigs[i + 1].btnId });
    }
 
    /// 强制绘制整个界面
    sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);