C # GDI + simple drawing (4) simple drawing board Function

In the previous articles, I have introduced how to use GDI + for drawing and made an example. In this article, I will introduce how to use a tool similar to Windows for drawing.
I personally think that if you want to create a powerful drawing tool, it is far from enough to simply master GDI. At present, I can only do a simple drawing tool. you are welcome to discuss the shortcomings!

Let's take a look at the final effect:

Main functions: draw a straight line, rectangle, eraser, circle, switch the color, open the image, save the image, clear the image, and manually adjust the size of the canvas. When the software is started, it is a blank canvas, we can draw images directly on the canvas, or import an image through "open" in the menu, and then draw the image.
Platform: vs2005 winform

BecauseCodeToo many. Here we will only briefly introduce the production steps and provide you with project downloads.
1. layout the entire interface.
2. Implement the functions of the drawing tool
3. Implement the color picking function. Here we use the custom control written last time.
4. Implement menu functions
5. the canvas size can be adjusted manually.
6. Test

implement the functions of the drawing tool
some design modes have been used to reduce code coupling, so the code is a bit messy, hey! All the functional blocks of the drawing tool are written in the drawtools class. in the main form, you only need to call this class to complete the painting, instead of involving too much specific drawing code. This class provides the main tools: pencil, eraser, straight line, rectangle, circle, solid rectangle, solid circle. The Code of these functional blocks is not difficult. As long as you carefully read the previous articles, you should be able to understand them.
pay attention to the following points:
1. How to prevent unnecessary traces in the drawing process?
this issue has been mentioned in Article 3 . You may wish to see it first. To make the Code look more readable, I set two image variables, finishingimg used to save traces of the drawing process, orginalimg is used to save the completed drawing process and initial background image.
2. How does this class communicate with the main form?
of course, if you directly write these functional blocks in the main form, this problem does not occur. But the code will look very mixed. If there is a problem with the tool code, you need to change the entire project. Here, I define methods and attributes so that the main form can pass the canvas and color information to this tool class by assigning values to the attributes, and then call the corresponding tool methods to use these tools.
3. key attributes
to make these tools work properly, you must pass the following items to them: Target canvas (picturebox), drawing color, and original canvas.

Implement menu functions

Here we need to know a little about file operations. You can check the relevant information.
The main difficulty is the implementation of the menu item "open ".
To save the opened image after modification, you must enable the file to be closed after it is opened. Otherwise, the original file cannot be overwritten because the file is opened. This will cause a "GDI general error" during compilation ". Therefore, based on the practice of other friends on the Internet, the open image is first painted to another canvas through GDI +, and then the opened image and the canvas used to draw the image are closed in time.For details, seeHttp://www.wanxin.org/redirect.php? Tid = 3 & goto = lastpost

  Private   Void Openpic_click ( Object Sender, eventargs E)
{
Openfiledialog ofd =   New Openfiledialog (); // Instantiate file dialog box
Ofd. Filter =   " JPG | *. jpg | BMP | *. BMP | all files | *.* " ; // Set the display name of the opened file in the dialog box
If (OFD. showdialog () = Dialogresult. OK)
{
Bitmap BMP file =   New Bitmap (OFD. filename ); // Obtain open files
Panel2.autoscrollposition =   New Point ( 0 , 0 ); // Reset the scroll bar
Pbimg. Size = BMP file. size; // Adjust the size of the drawing area to the image size

Resize. Location =   New Point (BMP file. Width, BMP file. Height ); // Resize is used to manually adjust the size of the canvas.
// Because the size of the blank canvas is limited at the beginning, the "open" operation may change the size of the canvas, so we need to re-import the canvas to the tool class.
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 )); // If this sentence is not used, the background of the BMP is transparent.
G. drawimage (BMP formfile, 0 , 0 , BMP file. Width, BMP file. Height ); // Draw an image on the canvas
G. Dispose (); // Release resources occupied by the canvas
// Pbimg. Image = image. formfile (OFD. filename) is not directly used because it keeps the image open and cannot save the modified image.
BMP formfile. Dispose (); // Release resources occupied by images
G = Pbimg. creategraphics ();
G. drawimage (BMP, 0 , 0 );
G. Dispose ();
DT. orginalimg = BMP;
BMP. Dispose ();
Sfilename = Ofd. filename; // Stores the detailed path of an opened image file, which can be overwritten later.
Ofd. Dispose ();

}
}

To clear an image, fill the entire canvas with white.
The rest are relatively simple, so we will not discuss it in detail.

Adjust the canvas size manually
Some people on the Internet say that the API is used, but I personally think it is relatively easy to use other controls to help, at least we can understand it.
Idea: place a picturebox1 (5x5 in size), place it in the lower right corner of the main canvas, and then change the cursor to the arrow shape when entering, set the event when the mouse is pressed to move the picturebox1 following the mouse. When you release the mouse, adjust the coordinates in the lower right corner of the main canvas to the coordinates of picturebox1.
Let's take a look at the code below:
The Resize is the picturebox control that we use for help.

Private   Bool Bresize =   False ; // Whether to change the canvas size
Private   Void Resize_mousedown ( Object Sender, mouseeventargs E)
{
Bresize= True;//When you press the mouse, it indicates you want to adjust the size.
}

Private   Void Resize_mousemove ( Object Sender, mouseeventargs E)
{
If (Bresize)
{
Resize. Location= NewPoint (resize. Location. x+E. X, resize. Location. Y+E. y );

}
}

Private   Void Resize_mouseup ( Object Sender, mouseeventargs E)
{
Bresize =   False ; // Size Change ended
// Adjusting the size may cause the size of the canvas to exceed the screen area. Therefore, set autoscroll to true in advance.
// However, the appearance of the scroll bar increases the difficulty, because the scroll bar does not automatically help us adjust the coordinates of the image.
// This is because there are more than one Coordinate System in the GDI plot. It seems that there are three coordinates, not carefully understood. One is the screen coordinate, the other is the client area coordinate, and the other is the document coordinate.
// The up and down movement of the scroll bar changes the coordinates of the document, but the coordinates of the customer zone remain unchanged, and the location attribute belongs to the coordinates of the customer zone. Therefore, an error occurs during direct calculation.
// In this case, we need to know the offset between the coordinate of the document and the coordinate of the customer zone. This is what autoscrollpostion can provide.

Pbimg. Size =   New Size (resize. Location. x - ( This . Panel2.autoscrollposition. X), resize. Location. Y - ( This . Panel2.autoscrollposition. y ));
DT. drawtools_graphics = Pbimg. creategraphics (); // Because the size of the canvas is changed, the value must be assigned again.

// In addition, the canvas is changed, so you need to assign a value again.
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 follows (check the bottom right corner of the white area ):

In this case, you can drag the small block to adjust the image size.

In this way, the main problem has almost been solved, but there are still some shortcomings. We welcome your valuable comments.
Author: stg609