android ui的绘制流程图,使用jsPlumb绘制流程图
类似上述图例,一般在系统中审批配置中用到,今天亲身经历给大家讲述下jsplumb+jqueryUI来绘制流程图。
这个应该是官方的API: https://docs.jsplumbtoolkit.c...
1、介绍jsPlumb
此项目主要由Simon Porritt开发,他在澳大利亚西德尼担任网络开发人员,它适用于必须绘制图表的Web应用程序开发,可以认为它是个工具软件,也可以集成到自己的项目中,那下面就看下jsplumb+jqueryUI+Vue的实例。
2、基本元素组成
2.1 源节点 SourceId
2.2 目标节点 TargetId
2.3 锚点 Anchor
2.4 端点 Endpoint
2.5 连接线 Connector Line
3、jsPlumb方法
3.1 全局设置
/* global jsPlumb */
jsPlumb.ready(function() {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle',
connector: ['Bezier'],
anchor: ['Left', 'Right']
})
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
3.2 连接两个节点
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
3.3 可拖动节点
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
3.4 连接的其它参数
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle',
connector: ['Bezier'],
anchor: ['Left', 'Right']
})
3.5 增加一个端点
jsPlumb.addEndpoint("state1", exampleEndpoint1);
..........方法比较多,大家翻翻API,这里就不赘述了..........
4、实例初始化
jsplumb默认是注册在浏览器窗口的,将整个页面提供给我们作为一个实例,但我们也可以使用getInstance方法建立页面中一个独立的实例:
var firstInstance = jsPlumb.getInstance();
建立实例之后我们可以设置一些默认值:
firstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],//连接器类型
Anchors : [ "TopCenter", "BottomCenter" ]//锚点位置
});
firstInstance.connect({
source:"element1",//源端点
target:"element2",//目标端点
scope:"someScope" //可拖拽范围
});
5、jsPlumb支持事件
* connection
* connectionDetached
* connectionMoved
* click
* dblclick
* endpointClick
* endpointDblClick
* contextmenu
* beforeDrop
* beforeDetach
* zoom
* Connection Events
* Endpoint Events
* Overlay Events
* Unbinding Events
android ui的绘制流程图,使用jsPlumb绘制流程图相关推荐
- Android UI绘制流程分析(三)measure
源码版本Android 6.0 请参阅:http://androidxref.com/6.0.1_r10 本文目的是分析从Activity启动到走完绘制流程并显示在界面上的过程,在源码展示阶段为了使跟 ...
- 【Android UI】贝塞尔曲线 ⑦ ( 使用 德卡斯特里奥算法 公式计算的 方法绘制三阶贝塞尔曲线示例 )
文章目录 一.使用 德卡斯特里奥算法 公式计算的 方法绘制三阶贝塞尔曲线 二.代码示例 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.使用 德 ...
- android view绘制速度,关于android ui的优化 view 的绘制速度
关于如何优化activity的启动速度, view 的绘制速度, 可参考这个sdk里的文档. android-sdk-windows-1.5_r1/docs/resources/articles/wi ...
- Android UI SurfaceView的使用-绘制组合图型,并使其移动
绘制容器类: //图形绘制容器 public class Contanier {private List<Contanier> list;private float x=0,y=0;pub ...
- Android高手秘笈之View的绘制你应该知道的一切
目录 1. 简述android的UI系统的层级关系? 2. View绘制的整体流程? 3. MeasureSpec是什么? 4. 简述measure的测量流程? 5. 简述view的布局流程? 6. ...
- android paint 圆角 绘制_Android系统上绘制圆角和阴影的几种姿势
0x01 前言 在实际的开发工程中,对视图增加圆角和阴影效果的绘制是比较常见的需求,Android系统提供了一系列的方法以帮助开发者实现基础的视图圆角和阴影效果,但在面对实际的视觉需求时,想要完美达到 ...
- android 自定义viewgroup onmeasure,Android进阶——自定义View之View的绘制流程及实现onMeasure完全攻略...
引言 Android实际项目开发中,自定义View不可或缺,而作为自定义View的一种重要实现方式--继承View重绘尤其重要,前面很多文章基本总结了继承View的基本流程:自定义属性和继承View重 ...
- Android自定义View使用详细分析与绘制流程全解
目录 目录.png 1. 自定义View基础 1.1 分类 自定义View的实现方式有以下几种 类型 定义 自定义组合控件 多个控件组合成为一个新的控件,方便多处复用 继承系统View控件 继承自Te ...
- 【Android 性能优化】布局渲染优化 ( 过渡绘制 | 自定义控件过渡绘制 | 布局文件层次深 | GPU 过渡绘制调试工具 | 背景过度绘制 )
文章目录 一. 过度绘制 二. 过度绘制两种情况 ( 自定义控件 | 布局文件 ) 三. 过度绘制调试 1. 打开过渡绘制调试工具 2. 过渡绘制调试中不同颜色的含义 3. 过渡渲染示例 四. 背景过 ...
最新文章
- thinkpad e40 热键hotkey失效解决办法
- Cors 跨域Access-Control-Allow-Origin
- 面试中的网红虚拟DOM,你知多少呢?深入解读diff算法
- Win XP必须禁止的服务
- jenkins使用哪个版本号_Linux下安装JDK及jenkins
- Whitted光线追踪实现
- 什么是python元祖_Python学习之元组
- c15语言,Steam
- 顶顶顶!!	Xcode7.1下用CocoaPods安装Alamofire--swift下的第三方网络库
- Linux基础(八)服务器RAID及配置
- 索引缓存_如何重置您的Google桌面索引缓存
- 人工智能自动修复图片,模糊图片秒变高清
- Python练习——用循环求100以内7的倍数
- 聚合支付的清算风险有哪些?
- 天津理工大学计算机项目管理实验四,天津理工大学软件工程实验报告4.docx
- Hadoop集群性能测试
- 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码(小程序云)
- 如何定制App Store榜单优化策略?
- 《2040大预言:高科技引擎与社会新秩序》——2.4 在芯片上建造大金字塔
- 权威典藏版:漫游费的前世今生(下)