C#学习随笔—自定义控件(线，箭头等图形)

liuian 2025-04-29 02:03 65 浏览

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

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

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

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

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

要想实现上述的效果图，主要是借助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;

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

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

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值，目前试用效果还是可以的。到此，我们实现该控件的思路完全清楚了，我们就可以开始实现想要的控件了，全部代码如下：

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);
            }
        }

    }
}

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

c# form