C#實現(xiàn)流程圖設計器

更新時間：2015年11月25日 10:23:40 作者：JackWang-CUMT

這篇文章主要介紹了C#實現(xiàn)流程圖設計器，感興趣的小伙伴們可以參考一下

最近一個偶然的機會竟然實現(xiàn)了一個簡單的流程圖設計器（雖然其功能還有很多不完善之處，但是心中還是非常高興，滿滿的成就感）。

話不多說，先看一下實現(xiàn)的主界面效果：

左邊是一個ListView(listView1)，右邊的畫布是一個Panel(panel1)。下面將主要思路介紹如下：

　　1）允許拖放，listView1和panel1設置其AllowDrop=true;

　　2）非連接線類型的圖形拖放處理：左邊的listView1的項目被選中后，可以獲取其圖形類型（是路由器、是服務器還是云等），并在全局變量中記錄下當前的操作對象類型，然后拖放到panel1后，panel1獲得對應的圖形類型，首先判斷圖的類型是否為非連接線，如果是則獲取對應的圖片，用g.DrawImage將其繪制到畫布中，圖片的坐標參考自當前鼠標（拖放到panel1最后松開鼠標左鍵時的坐標）的坐標。

　　3）連接線類型的圖形處理：如果是連接線，應該要有兩個點來確定一條直線。當選中l(wèi)istView1的連接線時，會在全局變量中記錄下當前的操作對象類型是連接線，當在panel1上單擊時，首選判斷當前的操作對象類型的全局對象是否為連接線，如果是，則記錄第一次單擊的點，然后等待記錄單擊的第二個點，當?shù)诙螁螕敉瓿珊?，調(diào)用繪制直線的方法在畫布中進行繪制直線。

　　4）當線和圖形綁定后，拖放圖形時，直線附屬在圖形的那個點會隨著圖形位置的變化而變化，當最后定位后，panel1會重繪網(wǎng)格和流程圖。

　　5）編輯圖形信息：在panel1上雙擊時，程序獲取雙擊的坐標點離所有的圖形區(qū)域中最近的圖形，然后計算距離，看是否滿足設置的閾值，如果小于閾值，則認為是在該圖形上雙擊，是要進行編輯操作。

下面給出繪制網(wǎng)格的代碼：

/// <summary>
  /// 繪制網(wǎng)格
  /// </summary>
  private void renderGrid()
  {
   //全局變量存儲最大最小值，作為繪制區(qū)域
   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為當前畫布最大的對象個數(shù)
   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中實現(xiàn)超出邊界出現(xiàn)滾動條

    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;
    }
   }

  }

下面將繼續(xù)完善以下幾個功能：

1）序列化：可以將圖形序列化和反序列化，將序列化的信息保存到數(shù)據(jù)庫，也可以從數(shù)據(jù)庫加載圖形；

2）圖形節(jié)點必須要附加其他屬性和方法，為流程記錄更多的信息、例如權(quán)限配置、當前處理的人、下一步是什么節(jié)點等；

3）繪圖功能的加強，繪圖可以動態(tài)修改顏色，這樣可以區(qū)分流程在不同節(jié)點的顏色顯示；

4）布局優(yōu)化算法，能否根據(jù)畫布大小，自動排列圖形...

現(xiàn)在又將界面做了美化，界面如下：