详解js中构造流程图的核心技术JsPlumb


Posted in Javascript onDecember 08, 2015

项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下。

一、效果图展示

1、从左边拖动元素到中间区域,然后连线

详解js中构造流程图的核心技术JsPlumb

2、连线类型可以自定义:这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等

详解js中构造流程图的核心技术JsPlumb

3、鼠标拖动区域选中元素,并且选中元素统一拖动位置。

详解js中构造流程图的核心技术JsPlumb

详解js中构造流程图的核心技术JsPlumb

详解js中构造流程图的核心技术JsPlumb

4、对选中的元素左对齐。

详解js中构造流程图的核心技术JsPlumb

5、对选中元素居中对齐

详解js中构造流程图的核心技术JsPlumb

6、右对齐

详解js中构造流程图的核心技术JsPlumb

7、上对齐

详解js中构造流程图的核心技术JsPlumb

8、垂直居中对齐

详解js中构造流程图的核心技术JsPlumb

9、下对齐

详解js中构造流程图的核心技术JsPlumb

10、根据第一个选中的元素上下靠拢

详解js中构造流程图的核心技术JsPlumb

11、根据第一个选中的元素左右靠拢

详解js中构造流程图的核心技术JsPlumb

12、根据第一个选中的元素同高

详解js中构造流程图的核心技术JsPlumb

13、根据第一个选中的元素同宽

详解js中构造流程图的核心技术JsPlumb

14、选中元素顺时针旋转,点击一次旋转45度

详解js中构造流程图的核心技术JsPlumb

详解js中构造流程图的核心技术JsPlumb

15、选中元素逆时针旋转。

详解js中构造流程图的核心技术JsPlumb

16、选中统一删除元素以及元素上面的连线

详解js中构造流程图的核心技术JsPlumb

这里很多效果其实在项目中作用并不太大,很多单纯就是为了展示用的。

二、代码详解
这里涉及的效果比较多,可能要分多篇来介绍。这篇还是来看看构造流程图的核心技术:JsPlumb。

1、概述
关于JsPlumb的内容,在此就简单说明下吧。jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大。本项目中还是结合大家最熟悉的JQuery来讲解。并且还要注意的一点就是JsPlumb的浏览器兼容性,JsPlumb支持IE 6以上、火狐、谷歌等各种浏览器

2、使用
(1)引入JS文件
可以直接去官网上面下载最新的js库,由于JsPlumb需要JQuery的支持,按照网上的说法,它只兼容jQuery1.3.x及以上版本,并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。所以我们需要下载较高一点版本的JQuery和JQuery UI。关于JsPlumb的内容只需要引用一个Js即可。类似

<script src="~/Content/jquery-1.9.1.min.js"></script>
<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link href="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jsPlumb-master/dist/js/jquery.jsPlumb-1.7.5.js"></script>

(2)初始化
使用JsPlumb需要注意一点,JsPlumb的连线的样式是由点确定的,也就是说点的样式里面包含了相关的属性来说明当使用此点来连线的时候,连线的样式应该是什么样的。
在我们项目里面,左边的模型区域,中间才是设计区域。那么要将一个元素从模型区域创建出来,就要用到我们JQuery UI里面的draggable和droppable事件。首先我们注册左边模型的draggable和中间区域的droppable事件。

cshtml页面代码,<div id="divContentLeftMenu">这个是左边模型的容器,<div id="divCenter"></div>表示中间区域容器。

<div id="divContentLeftMenu">
      <div class="sidebar-menu" id="divSidebar">
        <a href="#plantmodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工厂模型</a>
        <ul id="plantmodel" class="nav nav-list collapse menu-second">
        </ul>
        <a href="#artlinemodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工艺段模型</a>
        <ul id="artlinemodel" class="nav nav-list collapse menu-second">
          <li>
            <a href="#">
              <div class="node radius" id="node4" dbtype="DTO_TM_ART_LINE">
                <label>工段</label>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="node" id="node5" dbtype="DTO_TM_ULOC">
                <label>工位</label>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div id="divCenter"></div>

Js代码:
首先我们定义几个点的样式的全局变量

//基本连接线样式
var connectorPaintStyle = {
  strokeStyle: "#1e8151",
  fillStyle: "transparent",
  radius: 5,
  lineWidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
  lineWidth: 3,
  strokeStyle: "#216477",
  outlineWidth: 2,
  outlineColor: "white"
};
var endpointHoverStyle = {
  fillStyle: "#216477",
  strokeStyle: "#216477"
};
//空心圆端点样式设置
var hollowCircle = {
  DragOptions: { cursor: 'pointer', zIndex: 2000 },
  endpoint: ["Dot", { radius: 7 }], //端点的形状
  connectorStyle: connectorPaintStyle,//连接线的颜色,大小样式
  connectorHoverStyle: connectorHoverStyle,
  paintStyle: {
    strokeStyle: "#1e8151",
    fillStyle: "transparent",
    radius: 5,
    lineWidth: 2
  },    //端点的颜色样式
  //anchor: "AutoDefault",
  isSource: true,  //是否可以拖动(作为连线起点)
  connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  isTarget: true,  //是否可以放置(连线终点)
  maxConnections: -1,  // 设置连接点最多可以连接几条线
  connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};

然后再页面初始化完成之后注册事件

$(function(){
        //左边区域的draggable事件
        $("#divContentLeftMenu .node").draggable({
          helper: "clone",
          scope: "plant"
        });

        //中间拖拽区的drop事件
        $("#divCenter").droppable({
          scope: "plant",
          drop: function (event, ui) {
            // 创建工厂模型到拖拽区
            CreateModel(ui, $(this));
          }
        });




});  
 
//1.创建模型(参数依次为:drop事件的ui、当前容器、id、当前样式)
 function CreateModel(ui, selector) {
    //1.1 添加html模型
    var modelid = $(ui.draggable).attr("id");
    i++;
    var id = modelid + i;
    var cur_css = modelid;
    var type = $(ui.helper).attr("dbtype");
    $(selector).append('<div class="node ' + cur_css + '" id="' + id + '" dbtype="' + type + '" parentid="' + $(selector).attr("id") + '" onclick="oInitElement.GetPropertiesByType(\'' + type + '\',this)" ondblclick="InitStation().DbClick(\'' + type + '\',this)" >' + $(ui.helper).html() + '</div>');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $("#" + id).css("left", left).css("top", top);
    //jsPlumb.setContainer($("#divCenter"));
    //1.2 添加连接点
    jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
    jsPlumb.draggable(id);

    //1.3 注册实体可draggable和resizable
    $("#" + id).draggable({
      containment: "parent",
      start: function () {
        startMove();
      },
      drag: function (event, ui) {
        MoveSelectDiv(event, ui, id);
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
      }
    });

    $("#" + id).resizable({
      resize: function () {
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
        //oInitElement.SendPropRequest("DTO_TM_PLANT", $(this));
      }
    });
    return id;
  };

重点来看看这一句:

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
调用了JsPlumb里面的addEndpoint方法,第一个参数表示页面标签的id,第一个表示连线点的位置(RightMiddle、LeftMiddle、TopCenter、BottomCenter四个选项);第三参数表示点的样式以及连线的样式。没调用依次addEndpoint方法,元素上面就会多一个连线的节点。关于hollowCircle里面各个参数的意义,可以查看api。

还有一句多个地方都看到了:

jsPlumb.repaintEverything();
看字面意思大概能知道这句是干什么的,修复所有。当在中间区域拖动元素的时候,如果不带这一句,节点不会跟着元素一起移动。加上之后节点才会跟随标签移动。至此,最基础的JsPlumb连线就完成了。

以上就是本文的全部内容,希望能够帮助大家学习掌握流程图的核心技术JsPlumb。

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
绑定回车enter事件代码
May 18 Javascript
javascript对象的相关操作小结
May 16 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
express.js中间件说明详解
Mar 19 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 #Javascript
jQuery实现的简单提示信息插件
Dec 08 #Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 #Javascript
AngularJS实现全选反选功能
Dec 08 #Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 #Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 #Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python实现爬虫下载美女图片
2015/07/14 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Pytorch之finetune使用详解
2020/01/18 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
优秀团员事迹材料1500字
2014/08/31 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
mysql 子查询的使用
2022/04/28 MySQL