ES6流程拖拽实现思路

mylxsw 发布于2019-08-23 16:56 / 2914人阅读

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

目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在页面直接操作流程，如果想在页面操作就需要将流程数据图像化，通过操作图像生成可以解析的数据格式。
目前前端技术已经足够先进，我们完全无需再使用传统的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

云服务器 GPU云服务器实现思路实现拖拽防ddos攻击软件思路实现 js实现数据拖拽

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

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

ES6流程拖拽实现思路

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

myshell 2019-08-02 16:13 评论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