[原创]《C#高级GDI+实战：从零开发一个流程图》第08章：增加菱形、平行四边形、圆角矩形，文本居中显示

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

关注

一、前言

前面的课程我们已经完成了形状和连线的抽象，并独立出了画布控件，基础已经打好，下面就要添砖加瓦了。我们本节课程就来添加一些不同的形状，如：菱形、平行四边形、圆角矩形等。而且我们前面发现形状内的文本都不是居中显示的，我们也顺便优化下。

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

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

二、先看效果

我们可以看到添加了不同的形状，且都支持拖动、连线。

看完本篇的代码，我们会发现实现起来很简单，只需要给继承形状基类实现下就行了，主程序只是添加个控件、生成个形状类，调用画布的添加形状方法就行了。

所以本节的课程重点在于如何去用GDI+“画”出这些形状。

三、菱形

像菱形及本文中的形状，就没有现在的GDI+方法来实现了，只能通过各个子方法来组合绘制出想要的形状。

我们先看下图的菱形图示：

我们的所做的就是依次绘制菱形的四个边，这四个顶点的坐标怎么来的呢？

我们在前面的抽象出形状基类那节讲过，属性Rect是指示形状所在的矩形区域，所以我们就要在这个矩形区域内，指定4个顶点并计算出坐标。

当有了坐标后，我可以使用GDI+的AddPolygon方法来将多个坐标点添加成一个多边形，其MSDN的解释如下：

最后使用GDI+的FillPath将此多边形绘制出来，具体的代码如下：

四、平行四边形

同菱形，我们也是使用类似的方法求出四个顶点的坐标，这里我们将倾斜距离设置为1/5的宽度：

代码定义里直接按图示取值即可：

五、圆角矩形

圆角矩形就和上面的两个形状不一样了，因为不再是由直线组成，而是要有弧度：

这里要使用一个新的GDI+方法：AddArc，添加一段弧线，其MSDN的解释如下：

注意看最下面那段话：

如果图中有上一条直线或曲线，则会添加一条线，用于将上一段的端点连接到弧线的开头。

所以我们并不需要添加4条直线4个弧线，只需要添加4个弧线就行了，我们暂时将弧线所在圆的直径固定为20。

其中：

1，左上角

2，右上角

3，右下角

4，左下角

我们参照上图的坐标及角度编写代码即可：

六、文本居中显示

上面的形状实现后，我们会发现文本位置都不统一，我们下面就来让文本统一居中显示。

核心是使用GDI+的DrawString的一个重载方法：

我们像下面这样写就能让文本居中显示：

关于StringFormat的详细讲解，请参照教程：

C# StringFormat详解之文本方向、对齐

https://www.cnblogs.com/lesliexin/p/12879270.html

具体的代码改造如下，不再赘述：

点击查看代码

     /// <summary>     /// 菱形定义     /// </summary>     public class LozengeShapeV2 : ShapeBase     {         public override void Draw(Graphics g)         {             var x2 = Rect.X;             var y2 = Rect.Y;             var w2 = Rect.Width;             var h2 = Rect.Height;              var x = x2 + w2 / 2;             var y = y2 + h2 / 2;              //左-上-右-下             var r0 = new Point(x2, y);             var r1 = new Point(x, y2);             var r2 = new Point(x2 + w2, y);             var r3 = new Point(x, y2 + h2);              var path = new GraphicsPath();             path.Reset();             path.AddPolygon(new Point[]{ r0,r1,r2,r3});             path.CloseFigure();             g.FillPath(new SolidBrush(BackgroundColor), path);              g.DrawString(Text, TextFont, new SolidBrush(FontColor), Rect,                 new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center });         }      } 	 	     /// <summary>     /// 平行四边形定义     /// </summary>     public class ParallelogramShapeV2 : ShapeBase     {         public override void Draw(Graphics g)         {             var x2 = Rect.X;             var y2 = Rect.Y;             var w2 = Rect.Width;             var h2 = Rect.Height;              var f = w2 / 5;              //左-上-右-下             var r0 = new Point(x2 + f, y2);             var r1 = new Point(x2 + w2, y2);             var r2 = new Point(x2 + w2 - f, y2 + h2);             var r3 = new Point(x2, y2 + h2);              var path = new GraphicsPath();             path.Reset();             path.AddPolygon(new Point[]{ r0,r1,r2,r3});             path.CloseFigure();             g.FillPath(new SolidBrush(BackgroundColor), path);              g.DrawString(Text, TextFont, new SolidBrush(FontColor), Rect,                 new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center });         }      } 	 	     /// <summary>     /// 圆角矩形定义     /// </summary>     public class RoundRectShapeV2 : ShapeBase     {         public override void Draw(Graphics g)         {             float diameter = 20;              var path = new GraphicsPath();             path.Reset();              RectangleF arc = new RectangleF(Rect.X, Rect.Y, diameter, diameter);                         // 左上角             path.AddArc(arc, 180, 90);              // 右上角             arc.X = Rect.Right - diameter;             path.AddArc(arc, 270, 90);              // 右下角             arc.Y = Rect.Bottom - diameter;             path.AddArc(arc, 0, 90);              // 左下角             arc.X = Rect.Left;             path.AddArc(arc, 90, 90);               path.CloseFigure();             g.FillPath(new SolidBrush(BackgroundColor), path);              g.DrawString(Text, TextFont, new SolidBrush(FontColor), Rect,                 new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center });         }      }

七、添加形状方法抽象出泛型方法

我们看之前添加矩形和圆形的方法：

会发现很类似，类似是因为矩形和圆形都是形状基类的实现，那么我们本节课程添加了这三个新的形状，再这样写就太繁琐了，我们直接抽象出一个泛型方法来解决此问题：

可以看到，就是将生成矩形和圆形的方法使用泛型替代。

我们再写一个泛型方法来将形状添加到画布：

好了，到此我们的代码就进一步简化了，添加不同形状只需要传入对应的形状类型就行了：

是不是很优雅~

完整代码如下，大家可自行尝试：

点击查看代码

using Elements; using Elements.Links; using Elements.Shapes; using FlowChartCanvas; 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 FormDemo07V4 : FormBase     {         public FormDemo07V4()         {             InitializeComponent();             DemoTitle = "第09节随课Demo  Part4";             DemoNote = "效果：所有形状内文本居中显示。";              //添加画布控件             _fcc = new FCCanvasV1();             _fcc.FCC_LinkColor += _fcc_FCC_LinkColor;             _fcc.FCC_LinkState += _fcc_FCC_LinkState;             _fcc.Dock = DockStyle.Fill;             panel1.Controls.Add(_fcc);          }          private void _fcc_FCC_LinkState(string obj)         {             toolStripStatusLabel1.Text = obj;         }          private Color _fcc_FCC_LinkColor()         {             return GetColor(_linkColorIndex++);         }          FCCanvasV1 _fcc;          /// <summary>         /// 形状颜色序号         /// </summary>         int _shapeColorIndex = 0;         /// <summary>         /// 连线颜色序号         /// </summary>         int _linkColorIndex = 0;                         /// <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;             }         }          //注：文章中说明：再次抽象          /// <summary>         /// 创建形状         /// </summary>         /// <typeparam name="T"></typeparam>         /// <param name="shapeText"></param>         /// <returns></returns>         T CreateShape<T>(string shapeText) where T:ShapeBase         {             var t = Activator.CreateInstance<T>();             t.Id = shapeText + Guid.NewGuid().ToString();             t.Rect = new Rectangle()             {                 X = 50,                 Y = 50,                 Width = 100,                 Height = 100,             };             t.FontColor = Color.White;             t.BackgroundColor = GetColor(_shapeColorIndex++);             t.Text = shapeText + _shapeColorIndex;             t.TextFont = Font;             return t;         }          /// <summary>         /// 创建指定类型的形状并添加到当前流程图画布中。         /// </summary>         /// <typeparam name="T"></typeparam>         /// <param name="shapeText"></param>         void CreateShapeAndAddToFCCanvas<T>(string shapeText) where T : ShapeBase         {             var sp = CreateShape<T>(shapeText);              _fcc.FCC_AddShapes(new List<ShapeBase>() { sp });             _fcc.FCC_Refresh();         }          private void toolStripButton1_Click(object sender, EventArgs e)         {             CreateShapeAndAddToFCCanvas<RectShapeV2>("矩形");         }          private void toolStripButton4_Click(object sender, EventArgs e)         {             CreateShapeAndAddToFCCanvas<EllipseShapeV2>("圆形");         }          private void toolStripButton5_Click(object sender, EventArgs e)         {             CreateShapeAndAddToFCCanvas<LozengeShapeV2>("菱形");         }          private void toolStripButton6_Click(object sender, EventArgs e)         {             CreateShapeAndAddToFCCanvas<ParallelogramShapeV2>("平行四边形");         }          private void toolStripButton7_Click(object sender, EventArgs e)         {             CreateShapeAndAddToFCCanvas<RoundRectShapeV2>("圆角矩形");         }          private void toolStripButton2_Click(object sender, EventArgs e)         {             _fcc.FCC_StartLink();         }          private void toolStripButton3_Click(object sender, EventArgs e)         {             _fcc.FCC_StopLink();         }      }   }