C学习随笔—自定义控件（线，箭头等图形）

欢迎大家来到IT世界,在知识的湖畔探索吧!

使用过C# Winform的朋友们，可能会发现，Winform自带的空间库里面是没有简单的绘图控件的，比如线条，箭头等等。如果我们需要显示类似的图形的时候，我们就需要直接在窗口上进行绘制。说实话，我是不太习惯这么搞的，坐标定位比较麻烦，而且当窗口扩大或者缩小时，绘制的图形还需要重新定位。

因此，在本文中，我创建了可以实现线条和箭头的控件，这样，可以代替窗口上直接绘制，而且能够重复使用。当然，我之前的文章也有介绍其他一些基础控件的自定义，如果有兴趣的朋友们可以看看，链接如下：

C#学习随笔—自定义控件（面板）

C#学习随笔—自定义控件（Label控件）

言归正传，本文我们想要实现的效果图如下：

箭头形状的效果图

欢迎大家来到IT世界,在知识的湖畔探索吧!

线性形状效果图

要想实现上述的效果图，主要是借助C# GDI本身的绘图功能，画线之后有自己的端头形状，其中就有箭头，然后就是内部颜色的填充。

首先来看，画线功能，如下代码：

Pen _pen = new Pen(_brush, this._lineStartWidth); _pen.DashStyle = this._lineDashStyle; AdjustableArrowCap _cap = new AdjustableArrowCap(this._startArrowSizeWidth, this._startArrowSizeHeight, true); _pen.CustomStartCap = (CustomLineCap)_cap;

欢迎大家来到IT世界,在知识的湖畔探索吧!

AdjustableArrowCap定义了自定义的箭头形状，可以根据自己的设置，配置箭头的大小。Pen可以对线进行绘画，可以设置其线宽，进而调整线的宽度。然后将Pen的端头形状设置为箭头即可。如果不需要箭头，只要定义_pen.StartCap即可，如_pen.StartCap = LineCap.Flat;之后对线的类型（实线还是虚线）设置Pen的DashStyle即可。

线条的颜色渐变，可以配置LinearGradientBrush填充Pen即可，基本的格式为：

欢迎大家来到IT世界,在知识的湖畔探索吧!LinearGradientBrush _brush = new LinearGradientBrush(_startPoint, _endPoint, this._startColor, this._endColor); Pen _pen = new Pen(_brush, this._lineStartWidth);

接下来就是最后一个比较麻烦的功能，线宽变化，就是说线开始时的线宽小，之后逐渐增加到终点。说实话，这个功能我现在想到的方法比较简单，就是一段一段的绘制线。结果就是图形加载会较慢，而且颜色的渐变不太好控制，因此，我目前的代码，如果想要线宽渐变，那么颜色就是用固定的颜色。不过，基本满足了我平时的使用。如果大家有好的思路和方法，也可以留言，万分感谢。下面我来大概说一下我的实现思路：

首先，先画一条线宽固定的线，线的接头可以配置成想要的箭头大小，这样，我就不需要关注箭头的实现了，我只需要想办法实现线宽的变化。一个循环，将起点和终点分隔为100份，然后每一份的线，设置不同的线宽宽度，就可以基本实现，线宽的可变。

到这里，大体的思路是有了，不过，还有一个小问题需要解决，如果从起点到终点分隔的话，那么到了线的终点，线宽将会把箭头覆盖掉，无法显示我们想要的功能，就想下图所示：

因此，我们需要设置一个Offset，终点的坐标要减去这个Offset，这样，终点的线宽就不会影响箭头的显示了。那么这个Offset是如何确定的呢，要知道，用户的箭头大小是不确定的，线宽也是不确定的，因此，这个Offset不能是一个定值，需要随着线的线宽以及箭头的高度来调整。

如上图所示，我们只需要将起点到终点减去Offset点分成100份即可，那么已知start，end的坐标，还有offset的值（箭头的高度乘以线宽），如何求得A点的坐标呢？简单的三角函数的勾股定理就可以求解，实现函数如下：

 //get x value of triangle private float tri_x_value(float start_x, float start_y, float end_x, float end_y,float edge ) { float value; try { value = edge * (end_x - start_x) /(float)System.Math.Sqrt( ((end_x - start_x) * (end_x - start_x) + (end_y - start_y) * (end_y - start_y))); } catch { value = 0; } return value; } //get y value of triangle private float tri_y_value(float start_x, float start_y, float end_x, float end_y, float edge) { float value; try { value = edge * (end_y - start_y) / (float)System.Math.Sqrt(((end_x - start_x) * (end_x - start_x) + (end_y - start_y) * (end_y - start_y))); } catch { value = 10; } return value; }

根据上述计算即可得出一个动态调整的Offset值，目前试用效果还是可以的。到此，我们实现该控件的思路完全清楚了，我们就可以开始实现想要的控件了，全部代码如下：

欢迎大家来到IT世界,在知识的湖畔探索吧!using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Data; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System.Drawing.Drawing2D; namespace MyLib_Simply { public partial class SimplyCtrlLine : UserControl { //线的宽度是否变化，Line表示不变化，Pie表示扇形变化 public enum line_shape_style { Line, Pie, } private line_shape_style _lineShapeStyle = line_shape_style.Pie; [Description("Line Shape Style"),Category("LineUserDefined")] public line_shape_style LineShapeStyle { get { return _lineShapeStyle; } set { _lineShapeStyle = value; } } //线的虚实类型 private DashStyle _lineDashStyle = DashStyle.Solid; [Description("Line Dash Style"),Category("LineUserDefined")] public DashStyle LineDashStyle { get { return _lineDashStyle; } set { _lineDashStyle = value; } } //线开始的颜色 private Color _startColor = Color.Red; [Description("Start Color"),Category("LineUserDefined")] public Color StartColor { get { return _startColor; } set { _startColor = value; } } //线终点的颜色， private Color _endColor = Color.Red; [Description("End Color,only available for Line Shape Type (Line)"), Category("LineUserDefined")] public Color EndColor { get { return _endColor; } set { _endColor = value; } } //线开始的宽度 private int _lineStartWidth = 1; [Description("Line Start Point Width"),Category("LineUserDefined")] public int LineStartWidth { get { return _lineStartWidth; } set { _lineStartWidth = value; } } //线宽变化时的终点的线宽 private int _lineEndWidth = 10; [Description("Line End Point Width,Only available for Pie Line Shape Type"), Category("LineUserDefined")] public int LineEndWidth { get { return _lineEndWidth; } set { _lineEndWidth = value; } } //线开始的形状配置 private LineCap _startLineCap = LineCap.Flat; [Description("Line Start Style"),Category("LineUserDefined")] public LineCap StartLineCap { get { return _startLineCap; } set { _startLineCap = value; } } //线结束的形状配置 private LineCap _endLineCap = LineCap.ArrowAnchor; [Description("Line End Style"), Category("LineUserDefined")] public LineCap EndLineCap { get { return _endLineCap; } set { _endLineCap = value; } } //箭头缩进 private float _startArrowInset = 3; [Description("Start Arrow Inset,only available for Arrow LineCap"),Category("LineUserDefined")] public float StartArrowInset { get { return _startArrowInset; } set { _startArrowInset = value; } } //箭头宽度 private float _startArrowSizeWidth = 10; [Description("Start Arrow Line Cap Size Width"), Category("LineUserDefined")] public float StartArrowSizeWidth { get { return _startArrowSizeWidth; } set { _startArrowSizeWidth = value; } } //箭头的高度 private float _startArrowSizeHeight = 10; [Description("Start Arrow Line Cap Size Height"), Category("LineUserDefined")] public float StartArrowSizeHeight { get { return _startArrowSizeHeight; } set { _startArrowSizeHeight = value; } } private float _endArrowInset = 3; [Description("End Arrow Inset,only available for Arrow LineCap"),Category("LineUserDefined")] public float EndArrowInset { get { return _endArrowInset; } set { _endArrowInset = value; } } private float _endArrowSizeWidth = 10; [Description("End Arrow Line Cap Size Width"),Category("LineUserDefined")] public float EndArrowSizeWidth { get { return _endArrowSizeWidth; } set { _endArrowSizeWidth = value; } } private float _endArrowSizeHeight = 10; [Description("End Arrow Line Cap Size Height"), Category("LineUserDefined")] public float EndArrowSizeHeight { get { return _endArrowSizeHeight; } set { _endArrowSizeHeight = value; } } //线开始的坐标X private float _startPointX = 2; [Description("Line Start Point X"),Category("LineUserDefined")] public float StartPointX { get { return _startPointX; } set { _startPointX = value; } } //线开始的坐标Y private float _startPointY = 2; [Description("Line Start Point Y"), Category("LineUserDefined")] public float StartPointY { get { return _startPointY; } set { _startPointY = value; } } private float _endPointX = 50; [Description("Line End Point X"), Category("LineUserDefined")] public float EndPointX { get { return _endPointX; } set { _endPointX = value; } } private float _endPointY = 50; [Description("Line End Point Y"), Category("LineUserDefined")] public float EndPointY { get { return _endPointY; } set { _endPointY = value; } } public SimplyCtrlLine() { InitializeComponent(); base.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true); this.BackColor = SystemColors.Control; } //重绘函数 protected override void OnPaint(PaintEventArgs e) { PointF _startPoint = new PointF(this._startPointX, this._startPointY); PointF _endPoint = new PointF(this._endPointX, this._endPointY); LinearGradientBrush _brush = new LinearGradientBrush(_startPoint, _endPoint, this._startColor, this._endColor); Pen _pen = new Pen(_brush, this._lineStartWidth); _pen.DashStyle = this._lineDashStyle; if (this._startLineCap == LineCap.ArrowAnchor) { AdjustableArrowCap _cap = new AdjustableArrowCap(this._startArrowSizeWidth, this._startArrowSizeHeight, true); _cap.MiddleInset = this._startArrowInset; _pen.CustomStartCap = (CustomLineCap)_cap; _cap.Dispose(); } else { _pen.StartCap = this._startLineCap; } if (this._endLineCap == LineCap.ArrowAnchor) { AdjustableArrowCap _cap = new AdjustableArrowCap(this._endArrowSizeWidth, this._endArrowSizeHeight, true); _cap.MiddleInset = this._endArrowInset; _pen.CustomEndCap = (CustomLineCap)_cap; _cap.Dispose(); } else { _pen.EndCap = this._endLineCap; } e.Graphics.Clear(this.BackColor); e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; switch (this._lineShapeStyle) { case line_shape_style.Line: default: e.Graphics.DrawLine(_pen, _startPoint, _endPoint); break; case line_shape_style.Pie: _pen.Color = this._startColor; e.Graphics.DrawLine(_pen, _startPoint, _endPoint); //_pen.CustomStartCap = null; //_pen.CustomEndCap = null; _pen.StartCap = LineCap.Flat; _pen.EndCap = LineCap.Flat; _pen.Color = this._startColor; PointF temp_point = _startPoint; for (int temp = 0; temp < 100; temp++) { _pen.Width = this._lineStartWidth + (float)((this._lineEndWidth - this._lineStartWidth) / 100.0*temp); _endPoint = new PointF((float)(this._startPointX + (this._endPointX - this._startPointX-tri_x_value(this._startPointX,this._startPointY,this._endPointX,this._endPointY, this._lineStartWidth * this._endArrowSizeHeight)) / 100.0 * (temp + 1)), (float)(this._startPointY+(this._endPointY - this._startPointY- tri_y_value(this._startPointX, this._startPointY, this._endPointX, this._endPointY, this._lineStartWidth * this._endArrowSizeHeight)) / 100.0 * (temp + 1))); e.Graphics.DrawLine(_pen, temp_point, _endPoint); temp_point = _endPoint; } break; } e.Graphics.Dispose(); _pen.Dispose(); _brush.Dispose(); base.OnPaint(e); } //get x value of triangle private float tri_x_value(float start_x, float start_y, float end_x, float end_y,float edge ) { float value; try { value = edge * (end_x - start_x) /(float)System.Math.Sqrt( ((end_x - start_x) * (end_x - start_x) + (end_y - start_y) * (end_y - start_y))); } catch { value = 0; } return value; } //get y value of triangle private float tri_y_value(float start_x, float start_y, float end_x, float end_y, float edge) { float value; try { value = edge * (end_y - start_y) / (float)System.Math.Sqrt(((end_x - start_x) * (end_x - start_x) + (end_y - start_y) * (end_y - start_y))); } catch { value = 10; } return value; } protected override void WndProc(ref Message m) { if (m.Msg != 20) { base.WndProc(ref m); } } } }

至此，该控件的基本实现已经完成，不过这个控件还有很大的改进空间，比如，除了直线，是不是可以画曲线？线宽和线的颜色同时线性变化？目前控件线的大小通过指定坐标实现，未来是否可以调整控件窗口就可以实现线宽，线长的调整？等等，这些都会是我之后研究的内容，今天分享的内容对于一般的形状实现基本够用，希望可以帮到大家，同时也希望大家如果有好的思路，也不吝分享。