以前看过不少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上双击时，程序获取双击的坐标点离所有的图形区域中最近的图形，然后计算距离，看是否满足设置的阈值，如果小于阈值，则认为是在该图形上双击，是要进行编辑操作。

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

绘制网格 renderGrid() 5 { Graphics g = this.panel1.CreateGraphics(); 8 Color color = Color.DarkGray; 9 Pen p = new Pen(color, 1); 10 p.DashStyle = DashStyle.Dash; 11 for (int x = 0; x <= this.panel1.Width; x = x + 20) 12 { 13 PointF p1 = new PointF(x, 0); 14 PointF p2 = new PointF(x, Height); 15 g.DrawLine(p, p1, p2); 16 } (int y = 0; y <= panel1.Height; y = y + 20) 19 { 20 PointF p1 = new PointF(0, y); 21 PointF p2 = new PointF(Width, y); 22 g.DrawLine(p, p1, p2); 23 24 } 25 26 }

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

panel1_MouseClick(object sender, MouseEventArgs e) 2 { 3 int X = e.X; 4 int Y = e.Y; 5 if (this.__gObjType== "") 6 { 7 return; 8 } ) 10 { 11 AddObjectFromMouseLocation(X, Y, 0, 0, this.__gObjType); 12 } { (__lineMouseClickedCount == 1) 17 { 18 __lineX2 = e.X; 19 __lineY2 = e.Y; 20 AddObjectFromMouseLocation(__lineX1, __lineY1, __lineX2, __lineY2, this.__gObjType); __lineMouseClickedCount = 0; 24 __lineX1 = 0; 25 __lineY1 = 0; 26 __lineX2 = 0; 27 __lineY2 = 0; 28 } (__lineMouseClickedCount == 0) 30 { 31 __lineX1 = e.X; 32 __lineY1 = e.Y; 33 __lineMouseClickedCount = 1; 34 } { 37 __lineMouseClickedCount = 0; 38 __lineX1 = 0; 39 __lineY1 = 0; 40 __lineX2 = 0; 41 __lineY2 = 0; 42 } 43 44 } 45 }

下面给出重绘的程序：