c# GDI+ simple drawing (4)

I have introduced you to how to use GDI+ to draw in the previous articles and made a screenshot example. In this article, I will introduce to you how to make a tool similar to windows drawing.
I personally think that if you want to make a powerful tool Drawing tool, then simply mastering GDI is not enough. At present, I can only make a relatively simple drawing tool. Any deficiencies are welcome to discuss!

Let’s take a look at the final effect first:

Main functions: draw straight lines, rectangles, erasers, circles, switch colors, open pictures, save pictures, clear pictures, manually adjust the canvas size; when the software first starts , is a blank canvas, we can draw directly on the canvas, or import a picture through "Open" in the menu, and then we can draw on this picture.
　Platform: VS2005 WINFORM

Since there are too many codes, I will only briefly introduce the production steps here and provide you with the project download.
　1. Lay out the entire interface.
　2. Implement the function of the drawing tool
　3. Implement the function of color picking. Here we directly use the custom control we wrote last time.
　 4. Implement the menu function
5. Implement the function of manually adjusting the canvas size
6. Test

Implement the function of the drawing tool
In order to make the code more coherent, I used some design patterns, because I am not very good at it, so the code It’s still a bit messy, hehe! All these functional blocks about drawing tools are written in the DrawTools class. Then in the main form, you only need to call this class to complete the drawing, without involving too much specific drawing code. The main tools provided by this class of drawing tools are: pencil, eraser, straight line, rectangle, circle, solid rectangle, and solid circle. The code for these function blocks is not difficult. As long as you have read the previous articles carefully, you should be able to understand it.
　The following points should be noted here:
　1. How to prevent unnecessary traces of the drawing process from being recorded?
　 This issue was mentioned in the third article. You might as well read that article first. In order to make the code more readable, I set up two Image variables, finishingImg is used to save traces of the drawing process, and orginalImg is used to save the completed drawing process and the initial background image.
　2. How does this class communicate with the main form?
　 Of course, if you write these function blocks directly in the main form, there will be no such problem. However, the code will appear very confusing. If there is a problem only with the tool code, the entire project will need to be changed. Here, I define methods and properties so that the main form can pass information about the artboard, canvas and color to the tool class by assigning values ​​to the properties, and then use these tools by calling the corresponding tool methods.
　 3. Key attributes
　 In order for these tools to work properly, the following things must be passed to him: target artboard (that is, picturebox), drawing color, and original canvas.

　To implement the menu function

here we need to have a little understanding of file operations, you can check the relevant information.
　The main difficulty is the implementation of the "Open" menu item
　If we want to resave the opened picture after modification, we must make the file close after opening, otherwise the original file will not be overwritten because the file is open. This will cause "GDI General Error" to pop up during compilation. Therefore, according to what other friends on the Internet do, first draw the opened picture onto another canvas through GDI+, and then promptly close the open picture and the drawing board used to draw the picture.

 private void openPic_Click(object sender, EventArgs e)
        {
            OpenFileDialog ofd = new OpenFileDialog();//实例化文件打开对话框
            ofd.Filter = "JPG|*.jpg|Bmp|*.bmp|所有文件|*.*";//设置对话框打开文件的括展名
            if (ofd.ShowDialog() == DialogResult.OK)
            {
                Bitmap bmpformfile = new Bitmap(ofd.FileName);//获取打开的文件
                panel2.AutoScrollPosition = new Point(0,0);//将滚动条复位
                pbImg.Size = bmpformfile.Size;//调整绘图区大小为图片大小

                reSize.Location = new Point(bmpformfile.Width, bmpformfile.Height);//reSize为我用来实现手动调节画布大小用的
                //因为我们初始时的空白画布大小有限，"打开"操作可能引起画板大小改变，所以要将画板重新传入工具类
                dt.DrawTools_Graphics = pbImg.CreateGraphics();

                Bitmap bmp = new Bitmap(pbImg.Width, pbImg.Height);
                Graphics g = Graphics.FromImage(bmp);
                g.FillRectangle(new SolidBrush(pbImg.BackColor), new Rectangle(0, 0, pbImg.Width, pbImg.Height));//不使用这句话，那么这个bmp的背景就是透明的
                g.DrawImage(bmpformfile, 0, 0,bmpformfile.Width,bmpformfile.Height);//将图片画到画板上
                g.Dispose();//释放画板所占资源
                //不直接使用pbImg.Image = Image.FormFile(ofd.FileName)是因为这样会让图片一直处于打开状态，也就无法保存修改后的图片
                bmpformfile.Dispose();//释放图片所占资源
                g = pbImg.CreateGraphics();
                g.DrawImage(bmp, 0, 0);
                g.Dispose();
                dt.OrginalImg = bmp;
                bmp.Dispose();
                sFileName = ofd.FileName;//储存打开的图片文件的详细路径，用来稍后能覆盖这个文件
                ofd.Dispose();

            }
        }

　Clearing the image is actually filling the entire canvas with white
　The others are relatively simple, so I won’t go into detail here.

　Achieve manual adjustment of canvas size
　Some people on the Internet say to use API, but personally I think it is easier to use other controls to help, at least we can understand it.
　 Idea: Place a picturebox1 (size 5*5), fix it in the lower right corner of the main drawing board, then change the Cursor when the mouse enters to an arrow shape, set the event when the mouse is pressed and moved, and let the picturebox1 follow the mouse movement . When the mouse is released, adjust the coordinates of the lower right corner of the main drawing board to the coordinates of picturebox1.
　Let’s take a look at the code:
　The reSize is the picturebox control we use to help

private bool bReSize = false;//是否改变画布大小
        private void reSize_MouseDown(object sender, MouseEventArgs e)
        {
            bReSize = true;//当鼠标按下时，说明要开始调节大小
        }

        private void reSize_MouseMove(object sender, MouseEventArgs e)
        {
            if (bReSize)
            {
                reSize.Location = new Point(reSize.Location.X + e.X, reSize.Location.Y + e.Y);

            }
        }

        private void reSize_MouseUp(object sender, MouseEventArgs e)
        {
            bReSize = false;//大小改变结束
            //调节大小可能造成画板大小超过屏幕区域，所以事先要设置autoScroll为true.
            //但是滚动条的出现反而增加了我们的难度，因为滚动条上下移动并不会自动帮我们调整图片的坐标。
            //这是因为GDI绘图的坐标系不只一个，好像有三个，没有仔细了解，一个是屏幕坐标，一个是客户区坐标，还个是文档坐标。
            //滚动条的上下移动改变的是文档的坐标，但是客户区坐标不变，而location属性就属于客户区坐标，所以我们直接计算会出现错误
            //这时我们就需要知道文档坐标与客户区坐标的偏移量，这就是AutoScrollPostion可以提供的

            pbImg.Size = new Size(reSize.Location.X - (this.panel2.AutoScrollPosition.X), reSize.Location.Y - (this.panel2.AutoScrollPosition.Y));
            dt.DrawTools_Graphics = pbImg.CreateGraphics();//因为画板的大小被改变所以必须重新赋值

            //另外画布也被改变所以也要重新赋值
            Bitmap bmp = new Bitmap(pbImg.Width, pbImg.Height);
            Graphics g = Graphics.FromImage(bmp);
            g.FillRectangle(new SolidBrush(Color.White), 0, 0, pbImg.Width, pbImg.Height);
            g.DrawImage(dt.OrginalImg, 0, 0);
            g.Dispose();
            g = pbImg.CreateGraphics();
            g.DrawImage(bmp, 0, 0);
            g.Dispose();
            dt.OrginalImg = bmp;

            bmp.Dispose();
        }

The effect is as shown below (look carefully at the lower right corner of the white area):

At this point, you can adjust the image size by dragging the small square.
　
　In this way, the main problem has almost been solved, but there are still some shortcomings. Everyone is welcome to provide valuable opinions.

For more c# GDI+ simple drawing (4) related articles, please pay attention to the PHP Chinese website!