jsPlumb的简单使用
- jsPlumb概述
jsPlumb是一个在dom元素之间绘制连接线的javascript框架,它使用svg技术绘制连接线。 - 基本概念
很明显,一个连线主要要解决的问题包括谁和谁连,在哪里连(连接点在哪里),连接点长啥样,如何画线等问题
1:Anchor,锚点,它是一个逻辑概念,解决连线的连接点位置问题。
2:Endpoint,端点,它是一个可视化的点,解决 连接点长啥样的问题
3:Connector,连线,解决如何画线的问题
4:Overlay,覆盖物,它主要为连接添加一些装饰物,不如标签文本,连接点的箭头。Anchor:
锚点的定义方式主要有下面几种
1:用数组来定义
[x位置,y位置,x方向,y方向]
[x位置,y位置,x方向,y方向,x像素偏移,y像素偏移]
位置的值在0~1之间
方向的值为0,1,-1
9个静态的值为:
Top TopRight
Right BottomRight
Bottom BottomLeft
Left TopLeft
Center
AutoDefault 包括Top, Right, Bottom, Left
需要注意的是,坐标使用第四象限的坐标
一个常用的组合是:
var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
, [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
2:几何图形的周边
Circle Ellipse Triangle Diamond Rectangle Square
anchor:[{ shape:"Triangle", anchorCount:150, rotation:25 } ]
3:连续
anchor:["Continuous", { faces:[ "top", "left" ] } ]Endpoint:
jsPlumb提供了四种类型的端点,
Dot,Rectangle,
Blank,使用失败了。
Image,使用失败了。Connectors
jsPlumb提供了四种类型的连线,
Bezier,StateMachine,Flowchart,StraightOverlay
jsPlumb提供了3种类型的覆盖物,
Arrow:箭头
Label:标签
Custom:自定义的html元素
ConnectionOverlays: [
["Arrow", {
location: 1,
//foldback: 1,
foldback: 0.618, ///0.618: 普通箭头,1:平底箭头,2:钻石箭头
visible: true,
id: "arrow"
}],
["Label", { location: 0.5,
cssClass: "endpointTargetLabel",
visible: true,
id: "label" }]
] - 几个需要注意的地方:
1:所有的子元素在一个父容器中,并且子元素都要使用绝对布局
position: absolute;
2:端点可以通过样式隐藏,直接使用"Blank"报错了。
3:性能,在多个连接的时候,需要使用批处理模式来绘制。
sintoonUx.jsPlumbInstance.setSuspendDrawing(true)
sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
4:设置可拖拽
sintoonUx.jsPlumbInstance.draggable(btnDoms); - 使用范例
drawConnectLine: function () {
var sintoonUx = this;
/// 定义锚点的位置
var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
, [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
/// 创建实例,配置默认的绘制属性,建立通用绘图方式等
sintoonUx.jsPlumbInstance = jsPlumb.getInstance({
PaintStyle: {
lineWidth: 2,
strokeStyle: "blue",
outlineColor: "blue",
dashstyle: "4 2",
outlineWidth: 1
},
// Connector: ["Bezier", { curviness: 30 }],
// Connector: ["StateMachine"],
// Connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
Connector: ["Straight", { stub: [20, 50], gap: 0 }], Endpoint: ["Dot", { radius: 5, cssClass: "displaynone" }],/// 通过样式来隐藏锚点
//Endpoint: ["Image ", { src: "http://rmadyq.sintoon.cn/Content/16Icons/arrow_right.png" }],/// 通过样式来隐藏锚点
// Endpoint: ["Blank", "Blank"], 失败报错了,
EndpointStyle: { fillStyle: "#567567" },
Anchor: [defaultAnchors],
// Anchor: ["Perimeter", { shape: "Triangle" }],
Container: sintoonUx.flowchartContainerId,
DragOptions: { cursor: 'pointer', zIndex: 2000 },
ConnectionOverlays: [
["Arrow", {
location: 1,
//foldback: 1,
foldback: 0.618,
visible: true,
id: "arrow"
}],
["Label", { location: 0.5, label: "zhu", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
]
}); /// 绘制标签
sintoonUx.jsPlumbInstance.bind("connection",
function (connInfo, originalEvent) {
var connection = connInfo.connection;
var labelText = connection.sourceId.substring(0, 15) + "-" + connection.targetId.substring(0, 15);
labelText = Ext.String.format("{0}---{1}", Ext.getCmp(connection.sourceId).flowStage,
Ext.getCmp(connection.targetId).flowStage);
connection.getOverlay("label").setLabel(labelText);
}); /// 批处理绘制
sintoonUx.jsPlumbInstance.setSuspendDrawing(true);
var searchPat = Ext.String.format("#{0} .btnDraggable", sintoonUx.flowchartContainerId);
var btnDoms = sintoonUx.jsPlumbInstance.getSelector(searchPat); /// 设置dom元素的可拖拽性
sintoonUx.jsPlumbInstance.draggable(btnDoms); /// 建立dom元素之间的连接,绘制连接线,锚点,覆盖物等
for (var i = 0; i < sintoonUx.btnConfigs.length - 1; i++) {
sintoonUx.jsPlumbInstance.connect({ reattach: true, source: sintoonUx.btnConfigs[i].btnId, target: sintoonUx.btnConfigs[i + 1].btnId });
} /// 强制绘制整个界面
sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
}
jsPlumb的简单使用的更多相关文章
- 使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现
本文实现的方法可以边异步加载数据边绘制拓扑图. 有若干点需要说明一下: 1. 一次性获取所有数据并绘制拓扑图, 请参见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...
- 使用jsPlumb制作流程图设计器
jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术. 项目 ...
- jsPlumb插件做一个模仿viso的可拖拉流程图
前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义拖拉的流程图,并且可以序列化保存在服务器端. 我在这次的实现上面做得比较粗糙,还有分享我在做j ...
- jsPlumb开发入门教程(实现html5拖拽连线)
jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头.曲线.直线等连接起来,适用于开发Web上的图表.建模工具等.它同时支持jQuery+jQuery UI.MooTo ...
- jsPlumb之流程图项目总结及实例
在使用jsPlumb过程中,所遇到的问题,以及解决方案,文中引用了<数据结构与算法JavaScript描述>的相关图片和一部分代码.截图是有点多,有时比较懒,没有太多的时间去详细的编辑. ...
- jsplumb 中文教程
https://wdd.js.org/jsplumb-chinese-tutorial/#/ 1. jsplumb 中文基础教程 后续更新会在仓库:https://github.com/wangdua ...
- 前端流程图jsplumb学习笔记
1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...
- [转]jsPlumb插件做一个模仿viso的可拖拉流程图
原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...
- jsPlumb学习笔记
这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...
随机推荐
- Python多线程、进程入门1
进程是资源的一个集合, 1.一个应用程序,可以有多进程和多线程 2.默认一个程序是单进程单线程 IO操作使用多线程提高并发 计算操作使用多进程提高并发 进程与线程区别 1.线程共享内存空间,进程的内存 ...
- win8安装SQL Server2008企业版
win8 系统,安装的时候要先安装SQL Server2008企业版 再安装Visual studio2010,不然SQL Server会有问题.
- vc++>>Connection using old (pre-4.1.1) authentication protocol refused (client option 'secure_auth' enable
用VC来连接远程MYSQL时,出现如标题一样的错误,网上搜索了此错误产生的原因,最后自己找到了解决办法. 此错误产生的原因: 异常原因在于服务器端的密码管理协议陈旧,使用的是旧有的用户密码格式存储:但 ...
- MVC中关于Membership类跟数据库的问题
Membership它们用的是ASPNETDB这个数据库,但我们可以使用我们自定义的数据库,然而除非我们自定义的数据库有着跟这个ASPNETDB一样的模式,否则ASP.NET提供的默认的SqlMemb ...
- [Maven]Maven安装简述
maven安装简述 1检查jdk安装 1.1cmd输入echo %JAVA_HOME%检查JAVA_HOME是否指向了正确的jdk安装目录 1.2cmd输入java-version检查window是否 ...
- Spark 1.6以后的内存管理机制
Spark 内部管理机制 Spark的内存管理自从1.6开始改变.老的内存管理实现自自staticMemoryManager类,然而现在它被称之为"legacy". " ...
- 为不同版本的 Windows 编写驱动程序
MSDN原文:https://msdn.microsoft.com/zh-cn/library/windows/hardware/ff554887(v=vs.85).aspx 创建驱动程序项目时,指定 ...
- QQ右下角浮动窗口
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- MySql增删改查命令
5.1 创建数据表 命令:create table <表名> ( <字段名1> <类型1> [,..<字段名n> <类型n>]); 例如,建 ...
- Google Developing for Android 二 - Memory 最佳实践 // lightSky‘Blog
Google Developing for Android 二 - Memory 最佳实践 | 分类于 Android最佳实践 原文:Developing for Android, II Th ...