jsPlumb 学习笔记
介绍
使用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 学习笔记的更多相关文章
- jsPlumb学习笔记
这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...
- 前端流程图jsplumb学习笔记
1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- [SYSU]每周一赛
2014年每周一赛第一场 A.Cutting Sausages B.Rectangular Fields //待做 ...
- php面向对象之抽像类、接口、final、类常量
一.抽像类(abstract) 在我们实际开发过程中,有些类并不需要被实例化,如前面学习到的一些父类,主要是让子类来继承,这样可以提高代码复用性语法结构: 代码如下 复制代码 ab ...
- the grave of my scripts
不定期更新.......... 1,fetch_seq.py https://github.com/freemao/AHRD/blob/master/fetch_seq.py 提取出你想要得染色体的某 ...
- Java-->将txt文件的所有行反转
--> 这里和上次代码不同,对同一文件进行操作,所以要用到一个第三方容器来存储数据 package com.dragon.java.filereverseline; import java.io ...
- DEDECMS调用特定ID文章内容的实现方法
DEDECMS调用特定ID文章内容的实现方法 {dede:loop table='dede_addonarticle' sort='aid' row='8' if='aid=524'} [field: ...
- coreseek(sphinx)安装1(xml数据源配置和测试)
1.下载coreseek-3.2.14-32版本.网址:http://www.coreseek.cn/products-install/install_on_windows/ (有详细的安装说明) ...
- H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
- jq中 offset()方法, scrollTop()方法以及scrollLeft()方法
offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scro ...
- Java 23种设计模式全解析
转自:http://blog.csdn.net/longyulu/article/details/9159589
- Codeforces Round #104 (Div. 1)
A.Lucky Conversion 题意 给定两个长度为 \(N(N \le 10^5)\) 且由4和7构成的 \(a, b\)串 对 \(a\) 可以有两种操作: 交换两个位置的字符; 改变一个位 ...