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