Visual Studio简单的画图窗体的搭建

很多新生可能都很好奇编程是怎么一回事，怎么编，用什么编……今天就给大家介绍如何使用Visual Studio搭建一个简单的画图窗体。

准备工作

• 下载Visual Studio，2010、2015、2017等版本都可以
• 开发环境选择C#

---

一、Visual Studio窗体的搭建

1. 第一步打开Visual Studio2010

这里以2010版为例，其他版本的搭建方法也一样

2. 新建项目

在启示页中找到“新建项目”，单击打开。也可以通过文件——新建——项目来新建项目。

3. 创建窗体（Windows Form）

项目类型我们选择Windows窗体应用程序，名称和解决方案名称可以自定义（尽量使用英文，避免发生不必要的错误），保存位置也可以通过“浏览”选择，尽量选择记得住且方便寻找的位置。

• Windows Form：可用于设计窗体和可视控件，以创建丰富的基于Windows的应用程序。
  

4. 调整窗体

建好的窗体如下，拖动边界点可以调整窗口大小

5. 添加控件

工具栏中找到“工具箱”，打开后，找到需要的控件直接拖入窗体即可。这里我们添加按钮（Button），图像框（pictureBox）

• 控件是指对数据和方法的封装。可以先简单地理解为窗体上的按钮、文本框、文字等等。
  

6. 编辑控件

选中按钮，可以在右下角修改它的属性，比如将Text值改为“画线”。同样的方法我们可以创建画线按钮、画面按钮。

• 属性包含了许多可以修改的值，大家可以多多尝试。
  

二、 下面开始编程内容

找到按钮的点击事件（Click），双击进入代码页

• 事件（Event） 基本上说是一个用户操作，如按键、点击、鼠标移动等等。
  
  

流程图：

1. 画点代码如下：

Form1类中变量如下：

Image myImage;            //定义一个位图
        Graphics g;               //利用该事件的参数g创建画面对象
        Pen pen = new Pen(Color.Black, 2); //定义画笔
        int PBheight, PBwidth;    //记录画板长宽
        int drawtype;             //drawtype确定画图方式（点，线，面）

Form1的构造函数：

public Form1()
        {
            InitializeComponent();
            PBheight = pictureBox1.Height;  //获取画板宽度
            PBwidth = pictureBox1.Width;    //获取画板高度
            myImage = new Bitmap(PBwidth, PBheight);
            g = Graphics.FromImage(myImage);//将位图作为画板
            g.Clear(Color.White);           //白底画布
            pictureBox1.Image = myImage;
        }

画点按钮的点击事件（Click）：

        private void button1_Click(object sender, EventArgs e)
        {
            drawtype = 1; //画图方式设为1
        }

画板的鼠标点击事件（MouseClick）：

        private void pictureBox1_MouseClick(object sender,MouseEventArgs e)
        {
            if (drawtype == 1)
            {
                g.DrawEllipse(pen, e.X - 2, e.Y - 2, 4, 4);//画点
                pictureBox1.Image = myImage;               //将点显示
            }
        }

实现画点：

2. 画线代码如下：

首先Form类中变量添加以下两行：

        int line_count = 0;          //记录点数
        Point line_p1 = new Point();//记录线段首点

画线按钮的点击事件（Click）：

        private void button2_Click(object sender, EventArgs e)
        {
            drawtype = 2;//画图方式定义为2
        }

画板的鼠标点击事件（MouseClick）中添加代码：

            if (drawtype == 2)
            {
                line_count++;           //点数增加
                if (line_count % 2 != 0)//点数为奇，记录首点
                {
                    line_p1.X = e.X; line_p1.Y = e.Y;
                }
                else//点数为偶
                {
                    Point line_p2 = new Point();
                    line_p2.X = e.X; line_p2.Y = e.Y; //记录尾点
                    g.DrawLine(pen, line_p1, line_p2);//首尾相连成线
                    pictureBox1.Image = myImage;      //画板中显示出来
                }
            }

实现画线：

3. 画面代码如下：

首先引用命名空间添加下列代码，来使用动态数组

using System.Collections;

Form类中变量添加以下两行：

        ArrayList ptX = new ArrayList();//动态数组记录X坐标
        ArrayList ptY = new ArrayList();//动态数组记录Y坐标

画面按钮的点击事件（Click）：

        private void button3_Click(object sender, EventArgs e)
        {
            drawtype = 3;//画图方式定义为3
        }

画板的鼠标点击事件（MouseClick）中添加代码：

            if (drawtype == 3)
            {
                ptX.Add(e.X); ptY.Add(e.Y);//记录点坐标
            }

画板的鼠标双击事件（DoubleClick）中添加代码：

        private void pictureBox1_DoubleClick(object sender, EventArgs e)
        {
            if (drawtype == 3)
            {
                Point[] points = new Point[ptX.Count];//定义点集
                for (int i = 0; i < ptX.Count; i++)//将记录坐标赋值给点集
                {
                    points[i].X = (int)ptX[i];
                    points[i].Y = (int)ptY[i];
                }
                g.DrawPolygon(pen, points);//用赋值好的点集画面
                pictureBox1.Image = myImage;//显示画好的面
                ptX.Clear(); ptY.Clear();//清空点集
            }           
        }

实现画面：

结语：以上是基础的绘制点线面的方法。当然，方法不是唯一的，实现点线面的绘制方法还有许多，不同方法有不同的特点，同学们可以各抒己见，自己动手编程，实现自己的方法。

纸上得来终觉浅，觉知此事要敲代码！

源代码：
链接：https://pan.baidu.com/s/1tCVokSSNtjEpQNogMPxzww
提取码：jkdb

扫码关注公众号，了解更多文章：

三山半落，一水中分。地纵经纬，理入乾坤。 ~兰州交通大学地理信息科学爱好者集散地，欢迎你的加入~