一、前言
前面的课程我们已经完成了形状和连线的抽象,并独立出了画布控件,基础已经打好,下面就要添砖加瓦了。我们本节课程就来添加一些不同的形状,如:菱形、平行四边形、圆角矩形等。而且我们前面发现形状内的文本都不是居中显示的,我们也顺便优化下。
相信看完的你,一定会有所收获!
本文地址: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的详细讲解,请参照教程:
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();
}
}
}
八、结语
我们本节课添加了多个不同的形状,这些形状也是流程图中常用的形状,有了这些基础,用户可按自己的需求添加自己的形状。当然现在的形状属性还很少,会随着课程的深入而丰富,以支持更多效果。
我们还抽象出一泛型方法来简化添加形状的操作,使用起来很是优雅。
现在基本的形状都有了,我们下节课就来添加新的连线:贝塞尔曲线,这个几乎是最常见的曲线。
同时,有了新的连线,我们还会增加不同的连接点用来连线,而不再只连接形状的中心点。
敬请期待。
感谢大家的观看,本人水平有限,文章不足之处欢迎大家评论指正。
-[END]-