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

呼延冰枫 · 2025-7-9 12:43:07

一、前言

前面的课程我们实现了两种形状：矩形、圆形，在第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());
}
}
}

复制代码

九、结语

本节课程是新阶段的开始，我们终于要在规范化与扩展性的基础上，开始新的旅途。
但是抽象到这一步就足够了吗？不足够！我们现在只是将形状和连线这些抽象了出来，但是具体的实现仍是写死在程序中，如果我新开了一个程序，怎么复用呢？
我们下节课就来解决复用的问题，我们将会独立出一张“画布”，所有的基础实现，如：添加形状、连线、拖动等都由“画布”自行实现，而程序只需要加载这张“画布”，然后调用“画布”提供的方法来达到想要的效果即可。敬请期待。
感谢大家的观看，本人水平有限，文章不足之处欢迎大家评论指正。
-[END]-

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除

账号		自动登录	找回密码
密码			立即注册

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

相关帖子

浏览过的版块

签约作者

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

相关帖子

相关推荐

浏览过的版块

签约作者