C#实现流程图设计器

最近一个偶然的机会竟然实现了一个简单的流程图设计器（虽然其功能还有很多不完善之处，但是心中还是非常高兴，满满的成就感）。

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

左边是一个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, 1);
   p.dashstyle = dashstyle.dash;
   for (int x = 0; x <= this.panel1.width; x = x + 20)
   {
    pointf p1 = new pointf(x, 0);
    pointf p2 = new pointf(x, height);
    g.drawline(p, p1, p2);
   }

   for (int y = 0; y <= panel1.height; y = y + 20)
   {
    pointf p1 = new pointf(0, 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, 0, 0, this.__gobjtype);
   }
   else
   {
    //line
    if (__linemouseclickedcount == 1)
    {
     __linex2 = e.x;
     __liney2 = e.y;
     addobjectfrommouselocation(__linex1, __liney1, __linex2, __liney2, this.__gobjtype);

     //连接线方向判断
     __linemouseclickedcount = 0;
     __linex1 = 0;
     __liney1 = 0;
     __linex2 = 0;
     __liney2 = 0;
    }
    else if (__linemouseclickedcount == 0)
    {
     __linex1 = e.x;
     __liney1 = e.y;
     __linemouseclickedcount = 1;
    }
    else
    {
     __linemouseclickedcount = 0;
     __linex1 = 0;
     __liney1 = 0;
     __linex2 = 0;
     __liney2 = 0;
    }

   }
  }

下面给出重绘的程序：

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 = 0;
   int ym = 0;

   int _maxx = 0;
   int _maxy = 0;
   int _minx = 0;
   int _miny = 0;
   int _oldw = this.panel1.width;
   int _oldh = this.panel1.height;

   string isline = "";
   //nobj==50为当前画布最大的对象个数
   for (int i = 0; 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) / 2;
      ym = (currobj.y1 + currobj.y2) / 2;
      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#实现流程图设计器的全部步骤，还分享了完善设计器的技巧，希望大家喜欢。