介绍

使用svg完成画图,四个概念:

anchor: endpoint在的位置,可通过name访问

endpoint:connection的一端节点,通过addPoint makeSource, connect创建,

connector:连接线

overlay:connector的装饰组件,如labelarrow

一个connection由一个connector,两个endpoint,0或者多个overlay构成,每个endpoint有一个关联的anchor.

anchor有四种类型:

static:固定不可移动的点

dynamic:从一组staticanchor中,每次动态选取一个合适的

perimeter:沿着特定图形的边

continous:没有固定的位置,根据线另一端点的朝向决定

connectors四种类型

Bezier(default):弯曲的贝塞尔曲线,参数是curviness用来定义控制点,默认150

Straight:stub和gap(线和endpoint的间隔)

flowchart: 折线,有stubalwaysRespectStubs gap midpoint(转折点)和cornerRadius

statemachine:轻微弯曲的线,quadraticBezier(二次贝塞尔曲线),有margin,curviness, proximityLimit(连接到自己时最小距离)

endpoint有四种类型

dot:radius cssClass  hoverClass

rectangle:width height cssClas hoverClass

blank:不可见,对于可拖拽链接的,使用dot和rectangle参数,并在css中设为透明。

image:从url得到image,src cssClass hoverClass

overlay有五种类型

arrow:控制长宽等

label:

plainArrow:三角形箭头

diamond:菱形

custom:任意的dom元素,需要实现create方法

location:

[0..1]代表connector上的比例

大于1或小于0代表绝对值的pixel

connections:

adding:在connectmakeSource  addEndpoint中

show和hideoverlay:connection.hideOverlay,connection.showOverlay  ,endPoint有同样的方法

removeoverlay:connection.removeOverlay()

重用commonsetting

var common = {
anchors:[ "BottomCenter", "TopCenter" ],
endpoints:["Dot", "Blank" ]
}; jsPlumb.connect({ source:"someElement", target:"someOtherElement" }, common); jsPlumb.connect({ source:"aThirdElement", target:"yetAnotherElement" }, common);

画连线

设置endPoint为 source
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle:'#666' },
isSource:true,
connectorStyle : { strokeStyle:"#666" },
isTarget:true
};
var endpoint = jsPlumb.addEndpoint('elementId', exampleGreyEndpointOptions
);

makeTarget和makeSource

将整个element变成target或source

jsPlumb.makeSource("el1", {
anchor:"Continuous",
endpoint:["Rectangle", { width:40, height:20 }],
maxConnections:3
});

uniqueEndpoint:

设置只有一个 endPoint

移除connections和endpoint

jsPlumb.detach(conn);
删除el上所有链接:jsPlumb.detachAllConnections(el, [params])
所有链接:jsPlumb.detachEveryConnection();

通过connect中的parameters参数向jsPlumb中传入参数。

动画:

jsPlumb.animate : function(el, properties, options) 调用方式类似于 jQuery

查询jsPlumb

可以用来查找connection或者endpoint等

css样式

overlays: cssClass

paintStyle可设置:fillStyle strokeStyle  lineWidth outlineWidth  outlineColordashStyle

hoverpaint style

hoverPaintStyle endpointHoverStyles

[转]http://blog.csdn.net/dananhai381/article/details/38870615

jsPlumb 学习笔记的更多相关文章

  1. jsPlumb学习笔记

    这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...

  2. 前端流程图jsplumb学习笔记

    1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. javascript js表示中文日期的经典写法

    <div id="time"> <script>document.getElementById('time').innerHTML=new Date().t ...

  2. C语言Makefile文件使用

    C语言中代码Makefile文件的写法 单文件,例: #定义变量 CFLAGS=gcc #具体命令都需要一个入口,all: 这个就相当于入口,默认情况,执行第一次入口, #后面执行其他入口进行依赖,如 ...

  3. 【代码分享】简单html5足球射门游戏分享

    之前空余时间想玩玩html5, 于是使用2.2.2的cocos2d-html5 制作了个简单的足球射门游戏 ,美术是自己在纸上画完用手机拍下再ps扣的图,哈哈,赞一下自己的创意. 在我的主页可以玩这个 ...

  4. Linux下解决“shutdown: command not found"问题

    今天关机时,使用shutdown来执行此操作,但出现了一个"bash:shutdown:command not found"错误提示.这让我很困惑,这个命令在系统中是肯定存在的,但 ...

  5. 使用 Spring Security 保护 Web 应用的安全

    安全一直是 Web 应用开发中非常重要的一个方面.从安全的角度来说,需要考虑用户认证和授权两个方面.为 Web 应用增加安全方面的能力并非一件简单的事情,需要考虑不同的认证和授权机制.Spring S ...

  6. Matlab神经网络工具箱学习之二

    螃蟹的分类 这个例子的目的是根据螃蟹的品种.背壳的长宽等等属性来判断螃蟹的性别,雄性还是雌性. 训练数据一共有六个属性: species, frontallip, rearwidth, length, ...

  7. javascript判断浏览器的版本

    在javascript中直接的使用navigator.userAgent就可以获取当前浏览器的版本等信息,以下是列出来的关于不同浏览器显示的值(Windows.Android.iPhone): IE6 ...

  8. JSP显示-下拉框

    <TABLE class="table-frame" id=p1 cellSpacing=0 cellPadding=0 width="99%" alig ...

  9. POJ 1523 SPF(寻找关节点)

                                                                         SPF Time Limit: 1000MS   Memory ...

  10. 【P1203】买花

    我先在已经弱到连高精乘单精都能写错的地步了QAQ 原题: 求一个小于等于N的数M,使得phi(M)/M最小,其中phi(M)是与M互质且比M小的数的个数.例如phi(4)=2,因为1,3和4互质. N ...