jsPlumb（3）-基本概念

tulayang 发布于2019-08-21 10:42 / 3466人阅读

摘要：介绍是用来连接元素的，所以核心是，其中又分为以下四个概念一个和某个相关元素的位置。有四种类型贝塞尔曲线直线流程图状态机。一个由两个一个，可有可无。每个有一个关联的。的公共只有和，创建和配置。但是你需要熟悉其内部的的概念。

介绍

jsPlumb是用来连接元素的，所以核心是Connection，其中又分为以下四个概念：

Anchor 一个和某个相关元素的位置。你不能创建它们，非可视化，只有逻辑上的position。更多信息，访问 this page

Endpoint Connection的可视的一个端点，你可以创建和连接它们，当然，首先你得使它们能拖放。或者通过程序上jsPlumb.connect(...)来创建和连接。更多信息，请访问 the page

Connector 可视化的，连接两个元素的线。有四种类型：贝塞尔曲线、直线、流程图、状态机。你不能和它们交互，你可以修改它们的定义。更多信息， this page

Overlay 一个UI控件，用来装饰Connector，如Label、Arrow等。

一个Connection由两个Endpoint、一个Connector，Overlay可有可无。每个Endpoint有一个关联的Anchor。

jsPlumb的公共API只有Connection和Endpoint，创建和配置。但是你需要熟悉其内部的Anchor, Connector and Overlay的概念。

Connector, Endpoint, Anchor & Overlay的定义

当你定义一个Connector, Endpoint, Anchor 或 Overlay的时候，你就需要定义，如：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Rectangle"
});

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { 
      cssClass:"myEndpoint", 
      width:30, 
      height:10 
  }]
});

var common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};
jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { width:30, height:10 }, common ]
});

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});

GPU云服务器云服务器基本概念短信产品基本概念机器学习基本概念超融合架构基本概念

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86040.html

jsPlumb（1） - 开始使用

摘要：社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用，在和以下版本使用。建议用户自己设置。到目前为止，一个在每个终点都有，在中间有一个标签，添加四个元素，实际添加的元素取决于渲染器使用的是还是。 jsPlumb jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。 jsPlumb没有额外的依赖。 ...

LoftySoul 2019-08-21 10:42 评论0 收藏0
jsPlumb（2）-配置

摘要：感受最容易最直观是重写的默认配置。有效健，初始值如下注意的是。每条默认设置的解释对于那些没有声明的，对的和也适用。所有的和的给默认使用是否可通过鼠标分离当被请求却不存在时是否报错默认的遮罩可通过配置配置是否可以连接的定义的和默认所有的通过感受jsPlumb最容易最直观是重写jsPlumb的默认配置。如果你没这么做，你不得不每次调用都得重写这些值。connect和addEndpoint...

tracy 2019-08-14 12:43 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 评论0 收藏0
jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖基于vue的jsplumb，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据json画连接图等功能...

Imfan 2019-08-02 16:03 评论0 收藏0