ES6流程拖拽实现思路

myshell 发布于2019-08-02 16:13 / 316人阅读

摘要：页面布局是流程操作栏，工具箱流程组件，绘图区。关于这部分可以了解一下的流程拖拽方法，这里推荐大神张鑫旭的文章有了流程的模块，当然还需要线路的指向。

目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在页面直接操作流程，如果想在页面操作就需要将流程数据图像化，通过操作图像生成可以解析的数据格式。
目前前端技术已经足够先进，我们完全无需再使用传统的ES3、ES5去实现这个功能，强大的ES6（面向对象思想）简化了曲折的路径，让只懂一点点JS的后端开发人员完全可以上手实现这一功能。
首先，需要配置nodejs环境，因为强大的nodejs有能够编译ES6的组件babel。https://nodejs.org/en/
其次，需要创建一个工程，引入webpack打包工具，我们最终会将所有js文件打包成一个bundle.js的文件并压缩混淆。https://webpack.github.io/
最后，我们需要引入编译器babel。https://www.babeljs.cn/
环境搭好之后，我们开始工程的设计。
页面布局是流程操作栏，工具箱（流程组件），绘图区。我们通过操作工具栏的组件，在绘图区绘制出流程的环节模块，每个模块都需要设置各种属性，当然，对于整个流程也需要属性设置。
布局定下来之后，就该实现如何拖拽了。关于这部分可以了解一下H5的流程拖拽方法，这里推荐大神张鑫旭的文章http://www.zhangxinxu.com/wor...
有了流程的模块，当然还需要线路的指向。这里需要使用svg实现这个功能。我们需要在画布区域放置一个svg的显示区，当拖拽工具的线条在这里生成svg的路径path，然后将线条的两端连接两个环节模块，这就需要通过改变path的路径属性来实现。具体svg的基础知识可以参考大神阮一峰的文章http://www.ruanyifeng.com/blo...
现在就剩下按照自己的需求继续完善具体功能了，看看我自己做的功能吧：

有问题的可以在加QQ交流群交流：1003516412

私有云专线服务实现思路实现拖拽防ddos攻击软件思路实现 js实现数据拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54881.html

ES6流程拖拽实现思路

摘要：页面布局是流程操作栏，工具箱流程组件，绘图区。关于这部分可以了解一下的流程拖拽方法，这里推荐大神张鑫旭的文章有了流程的模块，当然还需要线路的指向。目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在...

mylxsw 2019-08-23 16:56 评论0 收藏0
百度网盘文件夹框选功能

摘要：案例说明使用原生完成桌面操作级应用，对于原生的掌握情况而言，是一个较为全面的综合型案例。本次课从事件相关的功能入手，给大家带来详细的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例说明：使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家...

jkyin 2019-08-29 16:55 评论0 收藏0
前端实验手札——拖拽旋转图片的实现及思路

摘要：在拖拽旋转图片的实现中，最符合的就是上面这题的情况，接下来好好说明一下。经过按计算机推导出来的结论，反三角函数计算出来的结果是弧度，而一直使用的角表示的其实是角的弧度。拖拽围绕着图片的中心旋转，图片中心作为公式中的原点设为点使用。让我们来看看以下这道题：已知点A(x1,y1)和点B(x2,y2)，求两点求与圆点O(x0,y0)的夹角θ的角度：∠θ=arctan[(y2-y0)/(x...

tianren124 2019-08-23 11:31 评论0 收藏0
sSpring Boot多模块+ Shiro + Vue：前后端分离登陆整合，权限认证（一）

摘要：前言本文主要使用来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必须自己搭建过前端项目和后端项目，本文主要是介绍他们之间的互通，如果不知道这么搭建前端项目的同学可以先找别的看一下。前言本文主要使用spring boot + shiro + vue来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必...

macg0406 2019-08-19 11:38 评论0 收藏0
android动画交互 - 收藏集 - 掘金

摘要：项目地址这交互炸了二爱范儿是如何让详情页缩小为横向列表的掘金本文同步自的地方酒馆写在前面写这段话的时候，已经是夜里点了。【Android】给我一个Path，还你一个动画View - 掘金本篇文章已授权微信公众号 hongyangAndroid （鸿洋）独家发布转载请标明出处：http://gold.xitu.io/post/581c...本文出自:【张旭童的稀土掘金】(http:...

dabai 2019-06-25 11:14 评论0 收藏0