jsplumb学习（一）---初识jsplumb

Kevin-王

已于 2022-10-12 10:18:29 修改

阅读量1.6w

点赞数 3

分类专栏： jsplumb 文章标签：技术学习前端

于 2017-03-27 11:16:59 首次发布

本文链接：https://blog.csdn.net/sinat_16039187/article/details/66969546

版权

本文介绍了jsPlumb库的基础知识，包括锚点（anchor）、连接器（connector）和端点（endpoint）的概念，并通过官方实例展示了其效果。jsPlumb是一个用于创建UI元素间连接的库，常用于流程设计器。文章以直观的方式帮助开发者快速入门。

摘要由CSDN通过智能技术生成

七月开始实习工作了，一来到公司就要接触听都没听过的ETL项目，唉，什么是ETL啊？还是不管吧，作为一名开发人员，懂的开发，能完成需求就差不多了，还是认真鼓捣一下自己的代码吧。

接触流程设计器这个概念就是从ETL开始的，当时公司采用的是myFlow来作为流程设计器的首要开发源库，所以刚上手的时候也鼓捣了下myFlow.讲真，myFlow确实封装了很多方便的操作方法，但是整个项目下来，公司大牛们都觉得整体样式不好看，于是就采用了另一个流程设计器库jsPlumb,废话不多说，先来看看jsPlumb到底是什么。

基本概念：

1.anchor(锚点)

坐落在一个元素身上，用于多个元素之间相互连线的点，主要分为以下四类：

静态 - 这些固定在元素上的某个点上，不能移动。可以使用字符串来指定它们，以确定jsPlumb所附带的默认值，或描述该位置的数组
动态 - 这是静态锚的列表，每次连接绘制时，jsPlumb从中选择最合适的点。
周长锚 - 这些锚点符合某些给定形状的周长。它们在本质上是动态锚，其位置从底层形状的周边中选择。
连续锚 - 这些锚不固定在任何特定位置; 它们被分配到元素的四个面之一，这取决于该元素与关联连接中另一个元素的方向。

2.connector(连接器)

连接器是实际连接UI元素的线。jsPlumb有四个连接器实现 - 一条直线，一个贝塞尔曲线，“流程图”和“状态机”。默认连接器是Bezier曲线。

3.Endpoint(端点)

一个Endpoint模型的的外观

认识了几个基本概念，接下来是官方的一个实例体验下吧！

<!doctype html>
<html>
    <head>

        <title>jsPlumb - chart demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="../../css/jsPlumbToolkit-defaults.css">
        <link rel="stylesheet" href="../../css/main.css">
        <link rel="stylesheet" href="../../css/jsPlumbToolkit-demo.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="chart" data-library="dom">
    <div class="navbar navbar-top navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collaps