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

  • Post author:
  • Post category:其他



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



准备工作

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



一、Visual Studio窗体的搭建



1. 第一步打开Visual Studio2010

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

打开Visual Studio



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



扫码关注公众号,了解更多文章:


三山半落,一水中分。地纵经纬,理入乾坤。


~兰州交通大学地理信息科学爱好者集散地,欢迎你的加入~


在这里插入图片描述



版权声明:本文为qq_39059167原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。