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

  话不多说,先看一下实现的主界面效果:

左边是一个ListView(listView1),右边的画布是一个Panel(panel1)。下面将主要思路介绍如下:

  1)允许拖放,listView1和panel1设置其AllowDrop=true;

  2)非连接线类型的图形拖放处理:左边的listView1的项目被选中后,可以获取其图形类型(是路由器、是服务器还是云等),并在全局变量中记录下当前的操作对象类型,然后拖放到panel1后,panel1获得对应的图形类型,首先判断图的类型是否为非连接线,如果是则获取对应的图片,用g.DrawImage将其绘制到画布中,图片的坐标参考自当前鼠标(拖放到panel1最后松开鼠标左键时的坐标)的坐标。

  3)连接线类型的图形处理:如果是连接线,应该要有两个点来确定一条直线。当选中listView1的连接线时,会在全局变量中记录下当前的操作对象类型是连接线,当在panel1上单击时,首选判断当前的操作对象类型的全局对象是否为连接线,如果是,则记录第一次单击的点,然后等待记录单击的第二个点,当第二次单击完成后,调用绘制直线的方法在画布中进行绘制直线。

  4)当线和图形绑定后,拖放图形时,直线附属在图形的那个点会随着图形位置的变化而变化,当最后定位后,panel1会重绘网格和流程图。

  5)编辑图形信息:在panel1上双击时,程序获取双击的坐标点离所有的图形区域中最近的图形,然后计算距离,看是否满足设置的阈值,如果小于阈值,则认为是在该图形上双击,是要进行编辑操作。

下面给出绘制网格的代码:

         /// <summary>
/// 绘制网格
/// </summary>
private void renderGrid()
{
//全局变量存储最大最小值,作为绘制区域
Graphics g = this.panel1.CreateGraphics();
Color color = Color.DarkGray;
Pen p = new Pen(color, );
p.DashStyle = DashStyle.Dash;
for (int x = ; x <= this.panel1.Width; x = x + )
{
PointF p1 = new PointF(x, );
PointF p2 = new PointF(x, Height);
g.DrawLine(p, p1, p2);
} for (int y = ; y <= panel1.Height; y = y + )
{
PointF p1 = new PointF(, y);
PointF p2 = new PointF(Width, y);
g.DrawLine(p, p1, p2); } }

下面给出在panel1上进行鼠标单击的处理程序:

        private void panel1_MouseClick(object sender, MouseEventArgs e)
{
int X = e.X;
int Y = e.Y;
if (this.__gObjType== "")
{
return;
}
if (this.__gObjType != "Line")
{
AddObjectFromMouseLocation(X, Y, , , this.__gObjType);
}
else
{
//line
if (__lineMouseClickedCount == )
{
__lineX2 = e.X;
__lineY2 = e.Y;
AddObjectFromMouseLocation(__lineX1, __lineY1, __lineX2, __lineY2, this.__gObjType); //连接线方向判断
__lineMouseClickedCount = ;
__lineX1 = ;
__lineY1 = ;
__lineX2 = ;
__lineY2 = ;
}
else if (__lineMouseClickedCount == )
{
__lineX1 = e.X;
__lineY1 = e.Y;
__lineMouseClickedCount = ;
}
else
{
__lineMouseClickedCount = ;
__lineX1 = ;
__lineY1 = ;
__lineX2 = ;
__lineY2 = ;
} }
}

下面给出重绘的程序:

        private void ReDrawAll()
{
renderGrid();
Graphics g = this.panel1.CreateGraphics();
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
GObject CurrObj = new GObject();
Rectangle Rct = new Rectangle();
Pen p = new Pen(Color.Black);
//p.Width = 2;
p.Width = __penWidth * __zoomTimes; Image ObjImg;
int xm = ;
int ym = ; int _maxX = ;
int _maxY = ;
int _minX = ;
int _minY = ;
int _oldW = this.panel1.Width;
int _oldH = this.panel1.Height; string IsLine = "";
//Nobj==50为当前画布最大的对象个数
for (int i = ; i < GNetworkFlow.Nobj; i++)
{
CurrObj = GNetworkFlow.GObjects[i];
//当前对象类型判断
if (CurrObj.Type == "") IsLine = "N/D";
if (CurrObj.Type == "Line") IsLine = "Y";
if ((CurrObj.Type != "Line") && (CurrObj.Type != "")) IsLine = "N";
//
#region old panel1作为画布,将其嵌套在panel2中实现超出边界出现滚动条 if (_maxX < CurrObj.x2)
{
_maxX = CurrObj.x2;
}
if (_maxY < CurrObj.y2)
{
_maxY = CurrObj.y2;
}
if (_minX > CurrObj.x1)
{
_minX = CurrObj.x1;
}
if (_minY > CurrObj.y1)
{
_minY = CurrObj.y1;
} if (_oldW < _maxX - _minX)
{
this.panel1.Width = _maxX - _minX;
}
if (_oldH < _maxY - _minY)
{
this.panel1.Height = _maxY - _minY;
}
if (this.panel1.Height < this.panel2.Height)
{
this.panel1.Height = this.panel2.Height;
}
if (this.panel1.Width < this.panel2.Width)
{
this.panel1.Width = this.panel2.Width;
} #endregion switch (IsLine)
{
case "Y":
arrow.DrawArrow(g, p, p.Brush, CurrObj.x1, CurrObj.y1, CurrObj.x2, CurrObj.y2);
xm = (CurrObj.x1 + CurrObj.x2) / ;
ym = (CurrObj.y1 + CurrObj.y2) / ;
AddText(xm, ym, CurrObj.Name, false);
break;
case "N":
Rct.X = CurrObj.x1;
Rct.Y = CurrObj.y1;
Rct.Width = CurrObj.x2 - CurrObj.x1;
Rct.Height = CurrObj.y2 - CurrObj.y1;
if (CurrObj.Type != String.Empty)
{
ObjImg = FindGObjectTypeImage(CurrObj.Type);
g.DrawImage(ObjImg, Rct);
AddText(CurrObj.x1, CurrObj.y1, CurrObj.Name, true);
GNetworkFlow.AdjustLinkedTo(CurrObj.Name);
}
break;
}
} }

下面将继续完善以下几个功能:

1)序列化:可以将图形序列化和反序列化,将序列化的信息保存到数据库,也可以从数据库加载图形;

2)图形节点必须要附加其他属性和方法,为流程记录更多的信息、例如权限配置、当前处理的人、下一步是什么节点等;

3)绘图功能的加强,绘图可以动态修改颜色,这样可以区分流程在不同节点的颜色显示;

4)布局优化算法,能否根据画布大小,自动排列图形...

今天又将界面做了美化,界面如下:

C#如何实现一个简单的流程图设计器的更多相关文章

  1. C#用DesignSurface实现一个简单的窗体设计器

    System.ComponentModel.Design.DesignSurface是为设计组件提供一个用户界面,通过它可以实现一个简单的窗体设计器. 在构建之前,我们需要引入System.Desig ...

  2. 使用jsPlumb制作流程图设计器

    jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术. 项目 ...

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

    简易的流程图设计控件,效果图: JavaScript源文件在GooFlow.js中,样式文件是GooFlow2.css.可以自定义样式. GooFlow_item类是每个项的样式属性. 但估计实现任务 ...

  4. 使用Laravel 和 Vue 构建一个简单的SPA

    本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...

  5. 通过用 .NET 生成自定义窗体设计器来定制应用程序

    通过用 .NET 生成自定义窗体设计器来定制应用程序 https://www.microsoft.com/china/MSDN/library/netFramework/netframework/Cu ...

  6. Windows 窗体设计器(Windows Forms Designer)入门

      Visual Studio 2010 更新:2010 年 9 月 Windows 窗体设计器提供多个用于生成 Windows 窗体应用程序的工具. 本演练阐释如何使用设计器提供的各种工具生成应用程 ...

  7. 基于Extjs的web表单设计器

    由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版 ...

  8. Qt编写控件属性设计器

    一.前言 自从研究Qt编写自定义控件以来,一发不可收拾,越多越多人有类似的需求找我定制控件,陆陆续续写了上百个控件,目前已超过150个,于是逐渐衍生了另外一个需求,提供一个控件属性设计器,类似QtDe ...

  9. Springboot 整合Activiti流程设计器 完成一个简单的请假流程

    目录 1.前言 2.准备 3.下载解压 4.开始整合 mysql + activiti + thymeleaf 2.配置文件 3.复制文件 4.加入控制器 5.修改配置文件 6.剔除启动类里面的安全校 ...

随机推荐

  1. 通过telnet来实践HTTP协议。

    这是一篇实践教程,能够让你更加深刻的理解HTTP协议,因此需要一定的HTTP基础. 协议:一种规定,规定了你应该怎么去做,如w3c规定了浏览器应该怎么去解析HTML,CSS,JS.而HTTP则规定了客 ...

  2. nodejs常用组件

    mssql 用途:连接SqlServer数据库 excel 用途:操作excel文档 nodegrass 用途:模拟用户进行get/post请求,下载文件等

  3. Visual Studio 选择相同变量高亮

    前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一个词:矫情 呵呵,于是在网上找各种插件, ...

  4. 轻松搭建Unity3D 安卓Android开发环境

    1,下载安装Java的JDK: http://www.oracle.com/technetwork/java/javase/downloads/index.html (JDK中,包含JRE) 如果是6 ...

  5. golang在Windows下Sublime Text开发调试环境的配置

    一.前言 近期本人有工作调动,进入了一个全新的领域[golang]服务端开发.在此写下本文,希望给那些没接触过golang开发调试环境及还在犹豫选择那家golang IDE而纠结的朋友们一点点帮助,如 ...

  6. 应用 CSS3 动画实现12种风格的通知提示

    今天我们想分享几个简单的款式的网站通知效果.有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏.各个网站的通知样式和效果千篇一律,难得出现创意的通知效果.这里是实现一个应用 CSS3 ...

  7. NASA的下一个十年(译)

    原文 MICHAEL ROSTON (New York Times) 从左起:木卫二:土卫六:经过火星的水手谷星的合成图:金星的拼接图 大多数人已经从人类第一次近距离看到冥王星的兴奋中冷静下来.下一个 ...

  8. Android开发资源获取国内代理(转载)

    Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Androi ...

  9. SwiftLint——Swift代码检查及自动格式化工具

    某软不给力,正在做的UWP项目停工了.官方说法是要等到RS2发布新的VOIP架构,再看看是不是给某软面子.虽然Beta用户中发出了几点愤怒的声音,但是木有用.有用的只能是某软的Skype for bu ...

  10. 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

    一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图:                      ...