jsPlumb（3）-基本概念

介绍

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" } ]  ]
});

jsPlumb（3）-基本概念相关推荐

jsPlumb应用指南（一）概念部分
jsPlumb简介 jsPlumb是一个JavaScript的连接库,它可以根据不同需求,在两个元素之间生成连线,一个很典型的应用就是绘制流程图.jsPlumb可以对端点和连接线的样式做出精确的控制, ...
jsPlumb.jsAPI阅读笔记(官方文档翻译)
setup 如果不使用jQuery或者类jQuery库,则传入的节点得用id的形式,否则jsPlumb会为元素设置一个id. jsPlumb.ready(function(){··· }); //or ...
jsPlumb 学习笔记
介绍使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...
【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系
使用场景,在开发的项目中需要实现的功能是两个表单通过用户鼠标点击连线的方式来给两个表的字段做数据映射关系,点击提交把用户创建的映射关系以map的形式传给后端.当时各种百度都没找到相关的文档可以参考,后 ...
vue+jsplumb实现工作流程图
最近接到一个需求--给后台开发一个工作流程图,方便给领导看工作流程具体到哪一步. 先写了一个demo,大概样子如下: 官网文档Home | jsPlumb Toolkit Documentation ...
【web系列十四】Jsplumb画布使用方法
目录写在前面 Jsplumb介绍 jsplumb是什么安装和导入方式基本概念主要方法介绍 getInstance() addEndpoint() draggable() 开发建议 jsplum ...
Jsplumb笔记（记录）
这里写目录标题 setup 最好确认jsPlumb加载完毕之后,再开始使用相关功能. config defaults Basic Concepts 1. Static 可以使用基于数组的形式来定义锚点 ...
JSplumb 中文教程（前端自定义组件，流程图，拓扑图）
1. jsplumb 中文基础教程后续更新会在仓库:jsplumb仓库地址本文的图片是托管于七牛云的,由于使用的是测试域名,可能不知道哪天,图片就无法显示了.不过每个例子都有简单的在线demo, ...
Jsplumb基础教程(vue+jsplumb+d3)
目前github社区存在几款可用于设计流程图的绘图框架: go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ,支持各种交互 ...

jsPlumb（3）-基本概念

介绍

Connector, Endpoint, Anchor & Overlay的定义

jsPlumb（3）-基本概念相关推荐

最新文章

热门文章