[原创]《C#高级GDI+实战：从零开发一个流程图》第06章：繁琐？没扩展性？抽象！抽象！

技术分享 8个月前 (07-10) 0 999+

关注

一、前言

前面的课程我们实现了两种形状：矩形、圆形，在第4章的时候就会发现，仅增加了个新形状，代码量及判断逻辑就翻倍不止，异常繁琐，可维护性很差，更没有扩展性可言。我们本节课就来解决这一点，解决的方法也很简单经典：抽象！

相信看完的你，一定会有所收获！

本文地址：https://www.cnblogs.com/lesliexin/p/18972184

二、先看效果

其实没什么特别的效果可看，和之前一样的功能效果，但也从侧面证明了抽象后的功能完善性。

我们下面就来讲解如何抽象。

三、形状基类

我们先看如何抽象出形状基类。

1，起个基类名

我们按“形状基类”直译即可：

可以看到上面打了马赛克，是因为我们现在还不知道定义为“接口类”还是“抽象类”，随着下文的推进，自然而然的就知道如何选择了。

2，通用属性：ID、Rect

我们先来看一下矩形和圆形的定义：

可以看到，两者的定义是一样的，所以我们直接将这两个属性添加到基类中即可：

看到这里读者可能就有疑问了：矩形和圆形的绘制是传入Rectangle这没问题，但如果我的形状是菱形、圆角矩形等，绘制时是需要多个GDI+函数组合绘制而成，那么这个Rectangle有什么用？

答：这个Rectangle在基类中，已经是狭义上的坐标及尺寸了，就是这个属性是不直接参与绘制的，只是用来标识当前形状所处的位置及形状所占的大小范围。

又问：那“不直接参与绘制”，我应该如何绘制呢？

答：下面我们就来讲一下。

3，抽象方法：Draw()

对于形状的绘制，我们并不由基类直接实现，而是交由派生类去实现，所以我们定义一个抽象方法即可：

可以看到绘制方法只有一个参数：Graphics，所以派生出来的形状，就用这个Graphics来绘制自己的长啥样，矩形、圆形等等都行，基类不管这些，基类只负责把画笔交给派生类，画什么样都是由派生类自己绘制的。

看到这里的读者可能又有疑问：为什么非得用抽象方法？接口方法不行吗？

答：行，但为了更好的复用，我们需要在基类中添加一些基础实现，派生类可直接用，不想用重写即可，所以我们的基类要定义为“抽象类”，而不是“接口类”。

而且随着功能的完善，基类也在不断的优化，也会有更多的基础实现，所以定义为“抽象类”会更合适。

第1小节的马赛克也可以去掉了：

我们下面来实现一个虚方法，添加基础的实现。

4，虚方法：GetCentertPoint()

我们在前面的课程中知道，连线连接的是形状的中心点，所以对于不同的形状都有获取中心点的方法：

既然是都有的方法，而且方法实现也基本一致，那么我们就来提取到基类当中。同时为了保证扩展性，我们定义为虚方法，让派生类可直接用、也可自行实现。

当然，读者这时候又会有疑问了：为什么连线要连中心点？而不是上下左右边各有连接点？

答：会有的，后面都会有的，别着急。我们本节课是为了将前面的课程抽象出来，解决的是前面课程的痛点，后面的课程才是扩展的时候。

5，其它属性：颜色、文本等

其实到前面基本上就已经完成了，但是为了方便使用，我们还需要添加一些额外的通用属性进来。

我们先来看一下之前绘制矩形和圆形时的方法：

从中我们可以提取到这些都有的属性：形状的背景色、文本内容、文本字体、文本颜色。

所以我们在基类中添加上这些属性，让派生类在绘制时能直接从自身取到，不需要额外获取，保持统一的处理逻辑。

好了，到此我们基类就已经完成了，涵盖了前面课程所有的需求。下面是完整的基类代码，读者可自行查看：

点击查看代码

using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks;  namespace Elements {     /// <summary>     /// 形状基类     /// </summary>     public abstract class ShapeBase     {         /// <summary>         /// 形状ID         /// </summary>         public string Id { get; set; }         /// <summary>         /// 形状位置和尺寸         /// </summary>         public Rectangle Rect { get; set; }         /// <summary>         /// 背景颜色         /// </summary>         public Color BackgroundColor { get; set; }         /// <summary>         /// 形状内的文本         /// </summary>         public string Text { get; set; }         /// <summary>         /// 文本字体         /// </summary>         public Font TextFont { get; set; }         /// <summary>         /// 文本颜色         /// </summary>         public Color FontColor { get; set; }          //注：文章中说明，为了扩展性，不可能都在一个类中，不可能添加一个形状或连线就改代码，所以要把绘制方法放到基类中，由各个派生形状和连线自行绘制。         /// <summary>         /// 绘制形状         /// </summary>         /// <param name="g"></param>         public abstract void Draw(Graphics g);          /// <summary>         /// 获取形状的中心点         /// </summary>         /// <param name="shapeId"></param>         /// <returns></returns>         public virtual Point GetCentertPoint()         {             var line1X = Rect.X + Rect.Width / 2;             var line1Y = Rect.Y + Rect.Height / 2;             return new Point(line1X, line1Y);         }     } }

四、连线基类

我们再来看如何抽象出连线基类，虽然我们目前只有直接这一个连线类型，但是并不妨碍我们抽象出基类，而且我们后面是要支持多种类型的连线样式的，在此便随着一直抽象出基类。

1，起个基类名

同样，我们根据“连线基类”直译出基类名：

2，通用属性：ID、开始形状、结束形状

我们先来看一下前面课程里直线连线的定义：

首先我们看到连线也是有ID的，用来唯一标识连线。

然后有开始形状ID和结束形状ID，和两个判断是矩形或圆形的变量，因为我们已经抽象出了形状基类，所以我们就不需要再这样写了，我们直接定义两个形状基类，分别作为开始形状和结束形状：

可以看到代码已经简洁了起来，这就是抽象的好处。

3，抽象方法：Draw()

同样的，对于连线的绘制，我们并不由基类直接实现，而是交由派生类去实现，所以我们定义一个抽象方法即可：

4，其它属性：颜色

相较于形状，连线就很简单了，只需要一个连线颜色属性即可：

当然，这只是暂时的，后续会随需求扩增属性。

好了，到此我们基类就已经完成了，涵盖了前面课程所有的需求。下面是完整的基类代码，读者可自行查看：

点击查看代码

using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks;  namespace Elements {     //注：说明，这里不能使用ID，要使用形状，当然后续可再改。      public abstract class LinkBase     {         /// <summary>         /// 连线ID         /// </summary>         public string Id { get; set; }         /// <summary>         /// 连线开始形状         /// </summary>         public ShapeBase StartShape { get; set; }         /// <summary>         /// 连线结束形状         /// </summary>         public ShapeBase EndShape { get; set; }          /// <summary>         /// 连线的颜色         /// </summary>         public Color BackgroundColor { get; set; }          /// <summary>         /// 绘制连线         /// </summary>         /// <param name="g"></param>         public abstract void Draw(Graphics g);     }  }

五、将基类放到独立的类库

除了形状和连线这些要抽象外，我们也要对程序进行“抽象”。

我们将基类的定义，以及后续派生出来的各种形状、连线等都放到一个单独的类库当中，这样就可以避免耦合太深，而且我们对基类的改动、增加新的形状和连线等也方便和清晰很多，不会过多影响对应的程序。

六、形状派生

我们有了基类，下面就来派生出矩形和圆形：

1，矩形

我们创建一个类，直接继承自形状基类，然后按提示重写抽象方法Draw()，直接将前面课程里绘制矩形的方法复制过来，然后改成相关属性就行了：

是不是很简单。

2，圆形

同理可得：

3，将派生类放到Shapes文件夹中

同样的，我们将派生出来的矩形类和圆形类放到Shapes文件夹中，方便查看及维护：

我们后面课程所增加的形状都会放到Shapes文件夹中。

七、连线派生

同样的，我们将直线连线派生出来：

可以看到，简单了很多，而且也用到了形状基类中的获取形状中心点的虚方法。

然后我们同样的将类放到Links文件夹中：

八、程序改造

基类、派生类都有了，我们就来改造一下上节课的程序，看看会简化多少。

1，形状集合

之前的，我们需要分别定义不同形状和连线的集合：

而现在，我们只需要定义一个形状基类集合和一个连线基类集合：

2，绘制所有形状连线方法

这部分简化倒不大，因为我们之前就已经使用类似抽象的方式，将绘制方法分别写到独立的方法中：

而现在，我们直接调用基类的Draw()方法即可，不用管具体是如何实现的，因为它们会自行绘制：

写代码到这里，就感觉很舒服、很优雅，以后添加任何新形状、连线，都不需要改动了，终于不用再一遍遍重复写了。

3，鼠标相关事件

这里就不贴之前的实现代码了，太啰嗦了。直接看新实现的：

3.1，MouseDown

3.2，MouseMove

3.3，MouseUp

上面的代码，看下来是不是简单了很多，而且还有种熟悉的感觉？

没错！这和我们只有矩形时的实现几乎是一样的，从这也可以看出抽象后的实现简化程度有多少。

4，添加形状方法

当然，因为派生出来的矩形和圆形的属性已经变了，所以添加时也要做相应的改动：

好了，到此为止，我们终于改造完毕，在简化了大量代码后，仍实现了之前的效果，这就是抽象的力量。

下面是完整代码，大家可自行查看：

点击查看代码

using Elements; using Elements.Links; using Elements.Shapes; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;  namespace FlowChartDemo {     public partial class FormDemo05V1 : FormBase     {         public FormDemo05V1()         {             InitializeComponent();             DemoTitle = "第07节随课Demo  Part1";             DemoNote = "效果：抽象图形基类，从基类派生出矩形、圆形，实现拖动、连线。";              SetStyle(ControlStyles.AllPaintingInWmPaint |                 ControlStyles.UserPaint |                 ControlStyles.OptimizedDoubleBuffer,true);         }                         //注：文章中说明要添加Elements的项目引用。                  /// <summary>         /// 形状集合         /// </summary>         List<ShapeBase> Shapes = new List<ShapeBase>();         /// <summary>         /// 连线集合         /// </summary>         List<LinkBase> Links = new List<LinkBase>();          Bitmap _bmp;          /// <summary>         /// 重新绘制当前所有矩形和连线         /// </summary>         /// <param name="g"></param>         void DrawAll(Graphics g1)         {             //创建内存绘图，将形状和连线绘制到此内存绘图上，然后再一次性绘制到控件上             _bmp = new Bitmap(panel1.Width, panel1.Height);             var g = Graphics.FromImage(_bmp);              //设置显示质量             g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;             g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;             g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;             g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;             g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;              g.Clear(panel1.BackColor);              //绘制所有形状             foreach (var sp in Shapes)             {                 sp.Draw(g);             }              //绘制所有连线             foreach (var ln in Links)             {                 ln.Draw(g);             }              //绘制内存绘图到控件上             g1.DrawImage(_bmp, new PointF(0, 0));         }          //注：文章中说明；此处不过于抽象，后续章节会有          /// <summary>         /// 当前是否有鼠标按下，且有矩形被选中         /// </summary>         bool _isMouseDown = false;         /// <summary>         /// 最后一次鼠标的位置         /// </summary>         Point _lastMouseLocation = Point.Empty;         /// <summary>         /// 当前被鼠标选中的矩形         /// </summary>         ShapeBase _selectedShape = null;          /// <summary>         /// 添加连线时选中的第一个形状         /// </summary>         ShapeBase _selectedStartShape = null;         /// <summary>         /// 添加连线时选中的第一个形状         /// </summary>         ShapeBase _selectedEndShape = null;         /// <summary>         /// 是否正添加连线         /// </summary>         bool _isAddLink = false;          /// <summary>         /// 获取不同的背景颜色         /// </summary>         /// <param name="i"></param>         /// <returns></returns>         Color GetColor(int i)         {             switch (i)             {                 case 0: return Color.Red;                 case 1: return Color.Green;                 case 2: return Color.Blue;                 case 3: return Color.Orange;                 case 4: return Color.Purple;                 default: return Color.Red;             }         }           private void toolStripButton1_Click(object sender, EventArgs e)         {             var rs = new RectShape()             {                 Id = "矩形" + (Shapes.Count + 1),                 Rect = new Rectangle()                 {                     X = 50,                     Y = 50,                     Width = 100,                     Height = 100,                 },                 FontColor = Color.White,                 BackgroundColor = GetColor(Shapes.Count),                 Text = "矩形" + (Shapes.Count + 1),                 TextFont = Font,              };             Shapes.Add(rs);              //重绘所有             DrawAll(panel1.CreateGraphics());         }          private void panel1_MouseDown(object sender, MouseEventArgs e)         {             //当鼠标按下时              //取最上方的形状             var sp = Shapes.FindLast(a => a.Rect.Contains(e.Location));                         if (!_isAddLink)             {                 //当前没有处理连线状态                 if (sp != null)                 {                     //设置状态及选中矩形                     _isMouseDown = true;                     _lastMouseLocation = e.Location;                     _selectedShape = sp;                 }             }             else             {                 //正在添加连线                  if (_selectedStartShape == null)                 {                     //证明没有矩形和圆形被选中则设置开始形状                     if (sp != null)                     {                         //设置开始形状                         _selectedStartShape = sp;                     }                     toolStripStatusLabel1.Text = "请点击第2个形状";                 }                 else                 {                     //判断第2个形状是否是第1个形状                     if (sp != null)                     {                         //判断当前选中的矩形是否是第1步选中的矩形                         if (_selectedStartShape.Id == sp.Id)                         {                             toolStripStatusLabel1.Text = "不可选择同一个形状，请重新点击第2个形状";                             return;                         }                     }                      if (sp != null)                     {                         //设置结束形状                         _selectedEndShape = sp;                     }                     else                     {                         return;                     }                       //两个形状都设置了，便添加一条新连线                     Links.Add(new LineLink()                     {                         Id = "连线" + (Links.Count + 1),                         BackgroundColor=GetColor(Links.Count),                         StartShape=_selectedStartShape,                         EndShape=_selectedEndShape,                     });                     //两个形状都已选择，结束添加连线状态                     _isAddLink = false;                     toolStripStatusLabel1.Text = "";                     //重绘以显示连线                     DrawAll(panel1.CreateGraphics());                   }              }          }          private void panel1_MouseMove(object sender, MouseEventArgs e)         {             //当鼠标移动时              //如果处于添加连线时，则不移动形状             if (_isAddLink) return;              if (_isMouseDown)             {                 //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作                  //改变选中矩形的位置信息，随着鼠标移动而移动                  //计算鼠标位置变化信息                 var moveX = e.Location.X - _lastMouseLocation.X;                 var moveY = e.Location.Y - _lastMouseLocation.Y;                  //将选中形状的位置进行同样的变化                 var oldXY = _selectedShape.Rect.Location;                 oldXY.Offset(moveX, moveY);                 _selectedShape.Rect = new Rectangle(oldXY, _selectedShape.Rect.Size);                  //记录当前鼠标位置                 _lastMouseLocation.Offset(moveX, moveY);                  //重绘所有矩形                 DrawAll(panel1.CreateGraphics());             }          }          private void panel1_MouseUp(object sender, MouseEventArgs e)         {             //当鼠标松开时             if (_isMouseDown)             {                 //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作                  //重置相关记录信息                 _isMouseDown = false;                 _lastMouseLocation = Point.Empty;                 _selectedShape = null;             }         }          private void toolStripButton2_Click(object sender, EventArgs e)         {             _isAddLink = true;             _selectedStartShape = null;             _selectedEndShape = null;             toolStripStatusLabel1.Text = "请点击第1个形状";         }          private void toolStripButton3_Click(object sender, EventArgs e)         {             _isAddLink = false;             _selectedStartShape = null;             _selectedEndShape = null;             toolStripStatusLabel1.Text = "";             DrawAll(panel1.CreateGraphics());         }          private void toolStripButton4_Click(object sender, EventArgs e)         {             var rs = new EllipseShape()             {                 Id = "圆形" + (Shapes.Count + 1),                 Rect = new Rectangle()                 {                     X = 50,                     Y = 50,                     Width = 100,                     Height = 100,                 },                 FontColor = Color.White,                 BackgroundColor = GetColor(Shapes.Count),                 Text = "圆形" + (Shapes.Count + 1),                 TextFont = Font,              };             Shapes.Add(rs);              //重绘所有             DrawAll(panel1.CreateGraphics());         }     }   }