[原创]《C#高级GDI+实战：从零开发一个流程图》第02章：画一个矩形，能拖动！

一、前言

就像开发的教程都从“Hello World!”开篇一样，系列开始，我们也从一个最最简单的功能开始：画一个能拖动的矩形。

顺便说一下，另一篇教程：（原创）[C#] GDI+ 之鼠标交互：原理、示例、一步步深入、性能优化 讲的更详细和深入，可以作为补充。

就让我们从一个能拖动的矩形开始我们的流程图开发之旅吧！

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

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

二、先看效果

我们先看下本节所实现的效果：

可以看到，我们本节课程依次实现了三种效果：

添加一个可拖动的矩形

添加多个可拖动的矩形

添加多个不同颜色的可拖动的矩形。

下面我们就来依次看一下这三种效果是怎么一步步实现的。

（注：系列完成时，将会将此演示DEMO程序及完整的源代码工程一起放到Github和Gitee上，为了更好的跟随教程进度，暂时请先参照每篇文章中的代码。）

三、实现效果1：一个可拖动的矩形

（一）原理

前言中说的那篇教程已经讲的很详细了，此处简略说下原理：

画一个矩形 -> 检测鼠标点击、移动等事件 -> 当鼠标点在矩形里时，移动鼠标的同时，计算矩形坐标并重新绘制矩形

详细的原理流程图如下：

（二）代码实操

下面我们就依据上面的原理流程图，来一步步编写代码实现。

1，设计器界面

设计器界面如下图所示，一个按钮、一个Panel，然后Panel实现了MouseDown、MouseMove、MouseUp事件。

（注：请忽略上面的绿色标签等控件，这是为了做统一化的演示Demo工具，与本篇文章不相关。）

2，添加矩形的代码

定义一个全局变量，因为好多地方都要用到或修改其值：

绘制代码很简单，就是GDI+的绘制矩形方法：

然后我们为“添加矩形”按钮点击事件添加添加矩形的代码：

3，鼠标点击事件实现

看上节的流程图，我们可以发现，首要的一步就是要判断鼠标有没有点到矩形上。

同样，我们定义两个全局变量，分别是鼠标点中矩形的标志、和鼠标的当前位置。

然后我们在MouseDown事件中，判断并对全局变量赋值。

4，鼠标松开事件实现

我们先看这个MouseUp事件，这个事件是重置标志和坐标的。

5，鼠标移动事件

这个MouseMove事件，就是本节的核心，我们参照流程图，一步步用代码实现即可。

到此，整个效果1已经完全实现了，大家可以尝试尝试。也附上完整的后台代码：

点击查看代码

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 FormDemo01V1 : FormBase
    {
        public FormDemo01V1()
        {
            InitializeComponent();
            DemoTitle = "第02节随课Demo  Part1";
            DemoNote = "效果：添加【一个】可拖动的矩形";
        }

        /// <summary>
        /// 画矩形
        /// </summary>
        /// <param name="g"></param>
        void DrawRect(Graphics g)
        {
            g.Clear(panel1.BackColor);
            g.FillRectangle(Brushes.Red,Rect);
        }

        /// <summary>
        /// 当前是否有鼠标按下，且有矩形被选中
        /// </summary>
        bool _isMouseDown = false;
        /// <summary>
        /// 最后一次鼠标的位置
        /// </summary>
        Point _lastMouseLocation = Point.Empty;
        /// <summary>
        /// 当前矩形
        /// </summary>
        Rectangle Rect = Rectangle.Empty;

        private void toolStripButton1_Click(object sender, EventArgs e)
        {
            if (!Rect.IsEmpty)
            {
                MessageBox.Show("已有矩形，无法再次添加");
                return;
            }
            Rect = new Rectangle()
            {
                X = 50,
                Y = 50,
                Width = 100,
                Height = 100,
            };
            //重绘所有矩形
            DrawRect(panel1.CreateGraphics());
        }

        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {
            //当鼠标按下时

            if (Rect.Contains(e.Location))
            {
                //证明鼠标点到了矩形

                //设置状态及选中矩形
                _isMouseDown = true;
                _lastMouseLocation = e.Location;
            }
        }

        private void panel1_MouseMove(object sender, MouseEventArgs e)
        {
            //当鼠标移动时

            if (_isMouseDown)
            {
                //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作

                //改变选中矩形的位置信息，随着鼠标移动而移动

                //计算鼠标位置变化信息
                var moveX = e.Location.X - _lastMouseLocation.X;
                var moveY = e.Location.Y - _lastMouseLocation.Y;

                //将选中形状的位置进行同样的变化
                var oldXY = Rect.Location;
                oldXY.Offset(moveX, moveY);
                Rect = new Rectangle(oldXY, Rect.Size);

                //记录当前鼠标位置
                _lastMouseLocation.Offset(moveX, moveY);

                //重绘所有矩形
                DrawRect(panel1.CreateGraphics());
            }

        }

        private void panel1_MouseUp(object sender, MouseEventArgs e)
        {
            //当鼠标松开时
            if (_isMouseDown)
            {
                //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作

                //重置相关记录信息
                _isMouseDown = false;
                _lastMouseLocation = Point.Empty;
            }
        }
    }

}

四、实现效果2：多个可拖动的矩形

（一）原理

基本的实现原理和效果1是一样的，不过是多了一步：判断点击的是多个矩形中的哪个矩形，然后在移动时仅移动选中的矩形。

话不多说，我们直接上代码实操。

（二）代码实操

下面我们就依据上面的原理流程图，来一步步编写代码实现。

1，设计器界面

设计器界面还是和效果1一样，不再赘述。

2，添加矩形的代码

因为涉及到多个矩形，所以我们先定义一个类，以标识矩形信息：

然后我们定义一个矩形列表的全局变量，用于存储添加的所有矩形信息：

绘制代码也作同步调整，遍历的绘制所有矩形：

注意看上面的代码，我们是在效果1的基础上来实现一个遍历调用的方法，而不是直接重新写一个遍历方法，或者直接使用GDI+的绘制矩形数组方法，这样写是为了后续进一步的抽象，因为我们的目的不是只绘制矩形，还有其它各种各样的形状。具体的我们后续教程会有讲解。

然后我们为“添加矩形”按钮点击事件添加添加矩形的代码，与效果1的区别是多了一步添加到矩形列表的操作：

3，鼠标点击事件实现

我们看这个MouseDown事件，这里与效果1的区别是要判断点到的是矩形列表中的哪个矩形。

代码如下，我们不多做赘述。

注意看，我们这里判断点到的是哪个矩形时，如果同一个坐标点下有多个矩形，我们是选择最后所添加的矩形。这个很好理解，就是PS中的图层一样，后添加的图层在上面。同样的，在上面绘制所有矩形时也是同样的逻辑，从旧到新，依次绘制，后添加的在上面。

4，鼠标松开事件实现

我们先看这个MouseUp事件，也效果1的差别是还要重置选中的矩形。

5，鼠标移动事件

这个MouseMove事件，同样，与效果1的差别就是要用选中的矩形

到此，整个效果2已经完全实现了，大家可以尝试尝试。也附上完整的后台代码：

点击查看代码

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 FormDemo01V2 : FormBase
    {
        public FormDemo01V2()
        {
            InitializeComponent();
            DemoTitle = "第02节随课Demo  Part2";
            DemoNote = "效果：添加【多个】可拖动的矩形";
        }

        /// <summary>
        /// 矩形定义
        /// </summary>
        public class RectShape
        {
            /// <summary>
            /// 矩形ID
            /// </summary>
            public string Id { get; set; }
            /// <summary>
            /// 矩形位置和尺寸
            /// </summary>
            public Rectangle Rect { get; set; }
        }

        /// <summary>
        /// 当前界面矩形集合
        /// </summary>
        List<RectShape> Shapes = new List<RectShape>();

        /// <summary>
        /// 画一个矩形
        /// </summary>
        /// <param name="g"></param>
        /// <param name="shape"></param>
        void DrawShape(Graphics g,RectShape shape)
        {
            g.FillRectangle(Brushes.Red, shape.Rect);
            g.DrawString(shape.Id, Font, Brushes.White, shape.Rect);
        }

        /// <summary>
        /// 重新绘制当前所有矩形
        /// </summary>
        /// <param name="g"></param>
        void DrawAllShape(Graphics g)
        {
            g.Clear(panel1.BackColor) ;
            foreach (var sp in Shapes)
            {
                DrawShape(g, sp);
            }
        }

        /// <summary>
        /// 当前是否有鼠标按下，且有矩形被选中
        /// </summary>
        bool _isMouseDown = false;
        /// <summary>
        /// 最后一次鼠标的位置
        /// </summary>
        Point _lastMouseLocation = Point.Empty;
        /// <summary>
        /// 当前被鼠标选中的矩形
        /// </summary>
        RectShape _selectedShape = null;

        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,
                },
            };
            Shapes.Add(rs);
            //重绘所有矩形
            DrawAllShape(panel1.CreateGraphics());
        }

        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {
            //当鼠标按下时

            //取最上方的矩形，也就是最后添加的矩形
            var sp = Shapes.FindLast(a => a.Rect.Contains(e.Location));
            if (sp != null)
            {
                //证明取到了矩形

                //设置状态及选中矩形
                _isMouseDown = true;
                _lastMouseLocation = e.Location;
                _selectedShape = sp;
            }
        }

        private void panel1_MouseMove(object sender, MouseEventArgs e)
        {
            //当鼠标移动时

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

                //重绘所有矩形
                DrawAllShape(panel1.CreateGraphics());
            }

        }

        private void panel1_MouseUp(object sender, MouseEventArgs e)
        {
            //当鼠标松开时
            if (_isMouseDown)
            {
                //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作

                //重置相关记录信息
                _isMouseDown = false;
                _lastMouseLocation = Point.Empty;
                _selectedShape = null;
            }
        }
    }

}

五、实现效果3：多个不同颜色的可拖动的矩形

（一）原理

同样，基本的实现原理和效果2是一样的，不过是多了一步：添加矩形时，给予不同的颜色。

话不多说，我们直接上代码实操。

（二）代码实操

下面我们就依据上面的原理流程图，来一步步编写代码实现。

1，设计器界面

设计器界面还是和效果1一样，不再赘述。

2，添加矩形的代码

定义一个全局变量，不再赘述：

然后我们添加一个根据序号也不同颜色的简单方法：

同样的，绘制矩形方法我们也稍作调整，增加设置颜色的步骤：

注意看，我们上面的代码是重写了个新方法并添加个2以作区分，然后绘制所有矩形的地方也同步调整为调用这个新方法。但实际环境中，不需要这样，直接在原方法上修改即可，这样绘制所有矩形的方法也不需要修改。这就是抽象的好处，当然这里体现不明显，但是我们在日常要保持抽象的思想。

然后“添加矩形”按钮点击事件代码也没有改动：

3，鼠标点击事件实现

这个MouseDown事件与效果2一样，不再赘述。

4，鼠标松开事件实现

这个MouseUp事件与效果2一样，不再赘述。

5，鼠标移动事件

这个MouseMove事件与效果2一样，不再赘述。

到此，整个效果3已经完全实现了，大家可以尝试尝试。也附上完整的后台代码：

点击查看代码

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 FormDemo01V3 : FormBase
    {
        public FormDemo01V3()
        {
            InitializeComponent();
            DemoTitle = "第02节随课Demo  Part3";
            DemoNote = "效果：添加【多个】可拖动的矩形，且矩形颜色不一样";
        }

        /// <summary>
        /// 矩形定义
        /// </summary>
        public class RectShape
        {
            /// <summary>
            /// 矩形ID
            /// </summary>
            public string Id { get; set; }
            /// <summary>
            /// 矩形位置和尺寸
            /// </summary>
            public Rectangle Rect { get; set; }
        }

        /// <summary>
        /// 当前界面矩形集合
        /// </summary>
        List<RectShape> Shapes = new List<RectShape>();

        /// <summary>
        /// 画一个矩形(不同颜色)
        /// </summary>
        /// <param name="g"></param>
        /// <param name="shape"></param>
        void DrawShape2(Graphics g, RectShape shape)
        {
            var index = Shapes.FindIndex(a => a.Id == shape.Id);
            g.FillRectangle(GetBrush(index), shape.Rect);
            g.DrawString(shape.Id, Font, Brushes.White, shape.Rect);
        }

        /// <summary>
        /// 重新绘制当前所有矩形
        /// </summary>
        /// <param name="g"></param>
        void DrawAllShape(Graphics g)
        {
            g.Clear(panel1.BackColor) ;
            foreach (var sp in Shapes)
            {
                DrawShape2(g, sp);
            }
        }

        /// <summary>
        /// 当前是否有鼠标按下，且有矩形被选中
        /// </summary>
        bool _isMouseDown = false;
        /// <summary>
        /// 最后一次鼠标的位置
        /// </summary>
        Point _lastMouseLocation = Point.Empty;
        /// <summary>
        /// 当前被鼠标选中的矩形
        /// </summary>
        RectShape _selectedShape = null;

        /// <summary>
        /// 获取不同的背景颜色
        /// </summary>
        /// <param name="i"></param>
        /// <returns></returns>
        Brush GetBrush(int i)
        {
            switch (i)
            {
                case 0: return Brushes.Red;
                case 1: return Brushes.Green;
                case 2: return Brushes.Blue;
                case 3: return Brushes.Orange;
                case 4: return Brushes.Purple;
                default: return Brushes.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,
                },
            };
            Shapes.Add(rs);
            //重绘所有矩形
            DrawAllShape(panel1.CreateGraphics());
        }

        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {
            //当鼠标按下时

            //取最上方的矩形，也就是最后添加的矩形
            var sp = Shapes.FindLast(a => a.Rect.Contains(e.Location));
            if (sp != null)
            {
                //证明取到了矩形

                //设置状态及选中矩形
                _isMouseDown = true;
                _lastMouseLocation = e.Location;
                _selectedShape = sp;
            }
        }

        private void panel1_MouseMove(object sender, MouseEventArgs e)
        {
            //当鼠标移动时

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

                //重绘所有矩形
                DrawAllShape(panel1.CreateGraphics());
            }

        }

        private void panel1_MouseUp(object sender, MouseEventArgs e)
        {
            //当鼠标松开时
            if (_isMouseDown)
            {
                //当且仅当：有鼠标按下且有矩形被选中时，才进行后续操作

                //重置相关记录信息
                _isMouseDown = false;
                _lastMouseLocation = Point.Empty;
                _selectedShape = null;
            }
        }
    }

}

六、结语

绘制可拖动的矩形，是一切的开始和基础，我们通过本篇教程，了解到了如何一步步由浅入深，如何保持抽象的思想，为后续的开发打好基础。

本篇文章没有什么复杂的代码，都很常见，一个复杂的系统、繁复的功能都是由这样一个个简单的组件有机的组合成的。我们下篇教程，将会讲解如何在形状之间添加一条连线，这个也是流程图的基础。

感谢大家的观看，本人水平有限，文章不足之处欢迎大家评论指正。

-[END]-