流程结点可以添加了之后,接下来到画结点与结点之间的连线,效果图如下

很眼馋visio的连线可以折来折去,这里实现的连线比较简单。

首先是把连线的类型分为Z(折线)、N(折线)及I(直线)3种类型,然后在两个结点间划线的时候,根据两个结点间的位置来决定画哪种线。

1、结点2在结点1左边

2、结点2在结点1右边

//计算两个结点间连线的类型
p.calcLineType = function (n1, n2) {
var x11 = n1.left, x12 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width;
var y11 = n1.top, y12 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height;
var x1m = (x11 + x12) / 2, x2m = (x21 + x22) / 2, y1m = (y11 + y12) / 2, y2m = (y21 + y22) / 2;
if (x1m >= x22) {//结点2在结点1左边(x轴有交集)
if (y11 > y22) { //结点2在结点1左上方(y轴无交集)
return "N";
}
else if (y12 < y21) {//结点2在结点1左下方(y轴无交集)
return "N";
}
else {//y轴有交集
return (Math.abs(y1m - y2m) < 20 ? "I" : "Z");
}
}
else { //结点2在结点1右边(x轴有交集)
if (y11 > y22) { //结点2在结点1右上方(y轴无交集)
return (Math.abs(x1m - x2m) < 20 ? "I" : "N");
}
else if (y12 < y21) {//结点2在结点1右下方(y轴无交集)
return (Math.abs(x1m - x2m) < 20 ? "I" : "N");
}
else {//y轴有交集
return (Math.abs(y1m - y2m) < 20 ? "I" : "Z");
}
}
}; 

目前连线就是这样的简单实现,哪位朋友有心思的帮忙整个好点的实现。

代码:GoFlow_04.zip

演示地址:Demo

微信演示公众号:

另:Silverlight版

Silverlight版Demo

流程设计器jQuery + svg/vml(Demo4 - 画连线)的更多相关文章

  1. 流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)

    去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程 ...

  2. 流程设计器jQuery + svg/vml(Demo6 - 增加结点属性及切换)

    到目前流程设计器流程结点的拖拽操作已基本完成,接下来就到结点的属性开发了.前面已经开发过流程模板的属性了,结点属性跟模板属性类似,从属性模板定义copy一份,然后按各结点类型进行调整就ok. 1.先来 ...

  3. 流程设计器jQuery + svg/vml(Demo1 - 构建设计器UI界面)

    之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI ...

  4. 流程设计器jQuery + svg/vml(Demo2 - UI界面增加属性显示)

    设计器UI界面有了,接下来结点的属性怎么显示呢,采用弹窗的话觉得不方便用户:用easyui的propertygrid在最右边显示,又觉得要引入easyui,使得插件变复杂了:最后决定自己写. 1.实现 ...

  5. 流程设计器jQuery + svg/vml(Demo3 - 添加流程结点)

    经过前面的准备工作,终于把设计器的主要UI界面搭建好了,接下来到添加流程结点,效果如下图 代码:GoFlow_03.zip 演示地址:Demo 微信演示公众号: 另:Silverlight版 Silv ...

  6. 流程设计器jQuery + svg/vml(Demo5 - 撤消与重做)

    上篇完成了画线,接下来是撤消与重做. 代码:GoFlow_05.zip 演示地址:Demo 微信演示公众号: 另:Silverlight版 Silverlight版Demo

  7. jQuery + svg/vml

    流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)   去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结 ...

  8. YbSoftwareFactory 代码生成插件【十六】:Web 下灵活、强大的审批流程实现(含流程控制组件、流程设计器和表单设计器)

    程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...

  9. 工作流JBPM_day01:1-说明_MyProcessDesigner_流程设计器

    工作流JBPM_day01:1-说明 先只做请假功能,怎么做? (请假可以和考勤整合到一起) 1,银行(拿号---叫号---办理) 2,餐馆(点菜---上菜---结账) 3,网购(下订单--配送--收 ...

随机推荐

  1. mysql创建和删除表

    创建表 简单的方式 CREATE TABLE person ( ), name ), birthday DATE ); 或者是 CREATE TABLE IF NOT EXISTS person ( ...

  2. 用 node.js 的 hexo 框架搭建一个支持 markdown 的静态博客系统

    1,Hexo如何在线可视化写博客:   可以试试这款插件 hexo-admin. 2,马克飞象:   一个非常好的 markdown 编辑器. 3,Hexo博客文章设置密码的方法: 首先,在Hexo中 ...

  3. Linux下编译安装MySQL5.6

    [准备工作] 所有操作需要在root用户下 本机测试案例系统信息:centos7.3 安装路径:/usr/local/mysql [安装MySQL] 先安装如下依赖包: $ yum -y instal ...

  4. redis客户端hiredis

    Hiredis 在官网 http://redis.io/clients 中有说明This is the official C client. Support for the whole command ...

  5. 多线程Java面试题总结

    57.Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别?答:sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指 ...

  6. testng日志和报告

    TestNG是通过 Listeners 或者 Reporters 生成测试报告. Listeners,即 org.testng.ITestListener 的实现,能够在测试执行过程中发出各种测试结果 ...

  7. java基础知识 构造方法

    在java里面,构造方法也就是构造函数 构造函数=构造方法;构造方法是一种特殊的方法,具有以下特点.(1)构造方法的方法名必须与类名相同.(2)构造方法没有返回类型,也不能定义为void,在方法名前面 ...

  8. wcf 远程服务器返回了意外响应: (413) Request Entity Too Large。

    我遇到这个问题的原因是:我使用asp.net 网站调用wcf服务后,通过方法提交数据产生的.我提交的数据是一个实体,包含很多字符串和图片格式的二进制数据超过4M 就报个错误. 后来同事帮忙解决了.他说 ...

  9. PHP设计模式_注册树模式

    通过注册树模式可以更加简单快捷的获取对象,在某个地方实例化了一个对象,可以将这个对象“保存”起来(放入可以全局使用的数组里),用的时候只需要提供 保存对象的时候 的那个标识即可,解决全局共享和交换对象 ...

  10. POI之Excel导出

    1,在maven的pom文件中添加依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId& ...