svg开发流程图设计器

2024-11-03

使用SVG绘制流程图

本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化正在连接的线 1.节点实现流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的特性来实现: <g class="pane-node"> <foreignObject width="180" height="50"> <body xmlns="http://www.w3.org/1999/

C#如何实现一个简单的流程图设计器

以前看过不少Window Form开发的流程图设计器,支持节点拖放,非常方便即可设计出很美观的流程图,作为一个程序员,对其内部实现原理一直很好奇,感叹有朝一日自己如果可以开发一款类似的软件那是多么让人兴奋的事情呀!自从有了这样的想法,一直都在积累和学习这方面的知识,最近一个偶然的机会竟然实现了一个简单的流程图设计器(虽然其功能还有很多不完善之处,但是心中还是非常高兴,满满的成就感). 话不多说,先看一下实现的主界面效果: 左边是一个ListView(listView1),右边的画布是一个Pane

jsPlumb开发流程设计器

前言 jsPlumb是一款开源软件,但jsPlumb toolkit是收费的. 本文主要使用jsPlumb实现一些简单的流程设计功能. 基础学习首先引入jsplumb.min.js. <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.8.0/dist/js/jsplumb.min.js"></script> 然后编写代码如下: <html lang="en"> <h

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

去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程设计器最终实现的效果及应用案例放到网上(Demo),欢迎大家围观,欢迎园友们提出宝贵意见. 1.流程设计器整体外观 2.流程实例名称设置 3.活动审批人设置 4.条件公式设置以上是流程设计器的实现效果. 接下来想向园友们推荐一下我这几年来用业余时间做的一个云考勤系统(大部分时间花在做流程设计器.流

使用jsPlumb制作流程图设计器

jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术. 项目主页:http://jsplumbtoolkit.com/ GitHub:https://github.com/sporritt/jsPlumb 作为插件,主要支持jQuery/MooTools/YUI3三种js库,目前最新版本为1.4.1.其中作为jQuery的插件需要用到jQuery.jQuer

基于jQuery的web在线流程图设计器GooFlow

简易的流程图设计控件,效果图: JavaScript源文件在GooFlow.js中,样式文件是GooFlow2.css.可以自定义样式. GooFlow_item类是每个项的样式属性. 但估计实现任务要求需要改动的地方比较大,再斟酌考虑其他控件.

菜单设计器(Menu Designer)及其B/S,C/S双重实现（B/S开源）

ERP/MIS开发菜单设计器(Menu Designer)及其B/S,C/S双重实现(B/S开源) 一直从事ERP/MIS的开发工作,今天来展现一下菜单设计器的设计,及其用途,并对B/S部分代码开源. 先用EXCEL来展现,需要表达的菜单结构如图所示,一级菜单是销售,采购,仓库,其下的子菜单是,日记帐,报表,查询,设置,批次过帐. 第三级别的子菜单,以仓库为例仓库日记帐的明细功能包括进仓,出仓,仓库调整, 仓库查询的明细功能包括,库存结余,物料存货明细,仓库未完订单. 下面来使用菜单设

.NET 开源工作流: Slickflow流程引擎高级开发(十) -- BpmnJS流程设计器集成

前言: 在Slickflow产品开发过程中,前端流程设计器经历了几个不同的版本(jsPlumb, mxGraph等),目的是为了在设计流程时的用户体验更加良好,得到客户的好评和认可.BpmnJS流程设计器的集成,更加让客户体验到了优秀的前端流程设计器带来的改变.通过这篇文章的介绍,让我们来认识一下Slickflow产品对BpmnJS设计器的集成和使用. BPMN(Business Process Modeling Notation)是一种流程建模的通用和标准语言,用来绘制业务流程图,其好处是便于

.net erp（办公oa）开发平台架构概要说明之表单设计器

背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如果开发交叉功能也比较容易冲突和调试冲突,特别是服务经常调试产生冲突).完成某个功能开发以后,通过项目一键发布至测试环境进行集成测试.在集成测试ok后,一键发布至线上开发环境.2) 正式线上部署可以按照项目为单位建立负载均衡,按照项目为单位整体建立集群.单个web站点包含表单文件服务和表单代码服务.表

C# 报表设计器（winform 设计端）开发与实现生成网页的HTML报表

记得2010年之前,公司的项目基本上都要用到报表,以前我们常用的方法就是针对客户的需求来定制化开发(基本上是死写代码)来实现,经常导致项目经常性的延期,因为客户的需求经常会变化,随着用户的使用认知度的提高,对报表的要求越来越高,导致程序员不停的修改代码来实现,效率不高.结束遥遥无期...非常的痛苦:当然市面上有很多报表开发工具可以实现,但是针对小公司来说采购一套这样的系统的成本也非常的高,所以我们决定自己来开发一套像目前的润乾.FineReport 这样的报表设计器,来实现快速的报表设计制作.

C#基础系列：开发自己的窗体设计器（PropertyGrid显示中文属性名）

既然是一个窗体设计器,那就应该能够设置控件的属性,设置属性最好的当然是PropertyGrid了,我们仅仅需要使用一个PropertyGrid.SelectedObject = Control就可以搞定,让PropertyGrid显示Control的所有属性.可是这里显示的属性名是英文的.对于我们开发人员来说这无可厚非,我们也乐于接受.并且让PropertyGrid显示中文属性名,这对于我们开发人员的使用来说显得多此一举.可是,对于我这种类型的一个应用工具,英文属性名对于很多客户来说可能就很难懂

.net web 开发平台- 表单设计器一(web版)

如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动.为了应对这些需求而不去多次改动源码进行公布,就能够在项目中使用动态表单设计器.如今分享一下我做的动态表单设计器的设计思路,共同学习. 想做一个表单设计器,首先要确定是做c/s的还是b/s.我考虑到以后的发展方向是c/s向b/s转化,所以就选择了b/s的方向,并且做b/s比做c/s要简单非

Winform开发框架之图表报表在线设计器2-图表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

上一篇讲到,如何快速创建报表程序了.这篇教大家如何快速制作图表报表. 继上一篇,Winform开发框架之图表报表在线设计器-报表上一篇讲到如何了创建数据源,这里就不在介绍了.那我们就直接从图表设计器开始. 整体设计思路是:1.创建数据源(SQL脚本.存储过程)2.配置显示列名.查询条件等信息,基本信息如图表类型.x.y轴等.3.发布到菜单,按权限授权进行显示. 第一步:打开图表设计器如下 1.图表菜单区域,都有哪些图表. 2.图表预览显示区域 3.选择数据源,配置图表的查询条件和显示的控件.样

Winform开发框架之图表报表在线设计器-报表-SNF.EasyQuery项目--SNF快速开发平台3.3-+Spring.Net.Framework

带过项目和做过项目的人都知道,在客户现场客户的需求是百般多样的,今天要查销售出库情况,明天要看整个月的各部门销售情况,后天要查全年每个客户的项目金额.一直以前都有新需求,虽然会有售后收益,但如果有一个好用的报表设计工具也就好维护了,还可以把报表设计工具卖给客户,培养他们自己做报表.所以一直梦寐以求的希望有一个即实用又方便的工具.基于这点就在今年我对EasyQuery这个项目进行了整体规划的开发.现在已经完成了第一个版本是WinForm版的,只要做写sql语句.知道表结构就可以做报表和图表. 目前

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

到目前流程设计器流程结点的拖拽操作已基本完成,接下来就到结点的属性开发了.前面已经开发过流程模板的属性了,结点属性跟模板属性类似,从属性模板定义copy一份,然后按各结点类型进行调整就ok. 1.先来回顾下流程模板属性,这里对流程模板属性稍微进行了调整,效果图如下: //定义流程模板属性 TemplateProperty = function () { if (typeof TemplateProperty.defaults == "undefined") { /*第一次定义对象时为T

Java开发报表——Grid++Report 报表设计器

为了让数据显示的更加形象生动,报表在项目中差点儿是很常见的,可是大致能够分为两类: 一,图形:以图形的形式显示数据,比如柱状图,折线图,饼形图等等,这里有许多关于这方面的工具,比如JFreeCharts(利用Java语言实现的,相对来说不是太美观),FunsionChartsFree(利用xml+flash+Js实现.相对来说不错),能够參考我曾经的文章:图形生成工具(funsionChartsFree and ifreeChart) :其次还有HighCharts(http://www.hch

Windows 10开发基础——VS2015 Update1新建UWP项目，XAML设计器无法加载的解决

这次,我们来解决一个问题...在使用Visual Studio 2015 Update 1的时候,新建一个UWP的项目,XAML设计器就会崩,具体异常信息如下图: 解决方法如下:下面圈出的那个路径就按它默认的来,放C盘,别扔其它盘了.(由于VS2015已经装上去了,再运行安装程序,无论是修改,修复,都不会让你再选这个了.这里拿2013意思一下) 上面这就是解决方法了,下面的写的很乱,不忍直视. 接着来分析一下.... 上周六,打开VS,设计器居然无法加载了.点了重新加载N多次,管理员运行也无效之

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

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

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

设计器UI界面有了,接下来结点的属性怎么显示呢,采用弹窗的话觉得不方便用户:用easyui的propertygrid在最右边显示,又觉得要引入easyui,使得插件变复杂了:最后决定自己写. 1.实现效果如下: 1.1.属性显示 1.2.属性隐藏 1.3.属性分组收起 2.jQuery - 左右拖动分隔条(Demo) 3.流程板板属性定义及初始化 //定义流程模板属性 TemplateProperty = function () { if (typeof TemplateProperty.def

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

之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI界面,如下: 用到的图标有: 用CSS精灵工具如CSS Satyr可以把它们合在一起. C#的String.format用习惯,觉得js里拼字符串不好使,先模拟实现一个: function formatString() { var formatStr = arguments[0]; if (type

Type Script 在流程设计器的落地实践

流程设计器项目介绍从事过BPM行业的大佬必然对流程建模工具非常熟悉,做为WFMC三大体系结构模型中的核心模块,它是工作流的能力模型,其他模块都围绕工作流定义来构建. 成熟的建模工具通过可视化的操作界面和行业BPMN规范描述用户容易理解的工作流的各种构成图元,例如圆圈表示事件,方框表示活动. 流程设计器技术选型前端框架 VUE3 + TS + Ant Design Vue 选择TS做为首选语言我们是经过充分考虑和验证的,并不是单纯的因为TS比较流行.时髦而去无脑应用.流程设计器是对流程的建模,

svg开发流程图设计器

热门专题