Image cropping Effect

Prepare an image cutting function in the winform program. A rectangle frame has a handle to adjust and crop the image. Like ACDSee:

I found no ready-made stuff in the garden and prepared myself for the whole. After carefully thinking about the process of cropping and cropping images, we don't have to worry about it.
Because. the company opened by Uncle gates in net provides us with the omnipotent function drawimage, in msdn, the approximate explanation is to "Draw" pixels in the specified rectangular area of the source image to the specified rectangular area of the target image.

Let's take a look:

// Image cropping public bitmap getpartofimage (Bitmap sourceimg, int width, int height, int offsetx, int offsety) {bitmap sourcebitmap = sourceimg; bitmap resultbitmap = new Bitmap (width, height ); using (Graphics G = graphics. fromimage (resultbitmap) {rectangle resultrectangle = new rectangle (0, 0, width, height); rectangle sourcerectangle = new rectangle (0 + offsetx, 0 + offsety, width, height ); // omnipotent drawi The mage function can be used for many common image extension and amplification equivalent parameters. // First parameter: source image (cropped image) // second parameter: Target Image (cropped image) // third parameter: the area where the source image is cropped // The fourth parameter: Unit (pixels of course) g. drawimage (sourcebitmap, resultrectangle, sourcerectangle, graphicsunit. pixel);} return resultbitmap ;}

So we don't need to worry about the cropping process. We just need to adjust the rectangle.
In short, the effect is to move the mouse over a rectangle:
Perform cursor conversion, drag and drop at different positions of the four corners, and pin an edge at the corresponding position to stretch the top, bottom, left, and right sides of the rectangle.
Okay. Why? After adjustment, the coordinates of the width and height of the rectangle box are uploaded to the above function for processing.
It's time to explain all the core things.

To make it more common, I used the method of inheriting custom controls, because I think so:
First, After inheriting the system. Windows. Forms. control class, the onmouseover drag-and-drop events can be naturally captured and processed by your own defined code.
Second, you need to adjust the length and width of the control in different ways and re-write the onpaint of the control class for real-time display.
Third, all the things are encapsulated in this inherited control, and all mouse events are irrelevant to the outside world. This makes it easier to call them without code.
You only need to publish a method to obtain the selected region in the control.

The first is the drag effect. The process is as follows: when you press the left mouse button, record the coordinates of the current control relative to the parent container, that is, the this. Location attribute, and the coordinates of the mouse,
When you move the mouse, check if the left button is pressed to determine the offset between the current mouse position and the original record, and assign the offset value to this. location for the original record until the mouse pops up to complete the drag effect.
Repeat the above process when you press and move the mouse button again:

 private Point m_MousePoint; private Point m_LastPoint; protected override void OnMouseDown(MouseEventArgs e) {     base.OnMouseDown(e);     this.m_LastPoint = this.Location;     this.m_MousePoint = this.PointToScreen(e.Location);            } protected override void OnMouseMove(MouseEventArgs e) {     base.OnMouseMove(e);     if (e.Button == MouseButtons.Left)     {         Point t = this.PointToScreen(e.Location);         Point l = this.m_LastPoint;         l.Offset(t.X - this.m_MousePoint.X, t.Y - this.m_MousePoint.Y);         this.Location = l;     } }

Don't talk about the principle of stretching between the lower and lower sides of the rectangle frame. You can understand it when you think about it. When onpaint is used, the rectangle is naturally drawn along the border of the control.
When onmousemove is used, the rectangle border is determined based on the control's width and height plus location. When the border is pressed, drag the mouse to adjust the width, height, and coordinates of the control.
The following is the code of the key part of the custom control, including the rectangle frame handle and adjustment effect:

Protected override void onmousemove (mouseeventargs e) {base. onmousemove (E); If (Arow! = Arrowtype. none) {resize (E); return;} If (E. Y <= recarrow [4]. bottom & E. y> = recarrow [4]. top & E. x> = recarrow [4]. left & E. x <= recarrow [4]. right) // the upper left cursor = cursors. sizenwse; else if (E. Y <= recarrow [5]. bottom & E. y> = recarrow [5]. top & E. x> = recarrow [5]. left & E. x <= recarrow [5]. right) // lower left cursor = cursors. sizenesw; else if (E. Y <= recarrow [6]. bottom & E. y> = recarrow [6]. top & E. x> = Recarrow [6]. left & E. x <= recarrow [6]. right) // upper right cursor = cursors. sizenesw; else if (E. Y <= recarrow [7]. bottom & E. y> = recarrow [7]. top & E. x> = recarrow [7]. left & E. x <= recarrow [7]. right) // lower right cursor = cursors. sizenwse; else if (E. Y <= recarrow [0]. bottom & E. y> = recarrow [0]. top) // cursor = cursors. sizens; else if (E. Y <= recarrow [1]. bottom & E. y> = recarrow [1]. top) // lower cursor = cursors. s Izens; else if (E. x> = recarrow [2]. left & E. x <= recarrow [2]. right) // left cursor = cursors. sizewe; else if (E. x> = recarrow [3]. left & E. x <= recarrow [3]. right) // right cursor = cursors. sizewe; else cursor = cursors. sizeall; If (E. button = mousebuttons. left) {point T = This. pointtoscreen (E. location); point L = This. m_lastpoint; If (E. Y <= recarrow [4]. bottom & E. y> = recarrow [4]. top & E. x> = recarrow [4]. left & E. x <= recarrow [4]. right) // upper left Arow = arrowtype. leftup; else if (E. Y <= recarrow [5]. bottom & E. y> = recarrow [5]. top & E. x> = recarrow [5]. left & E. x <= recarrow [5]. right) // Arow = arrowtype in the lower left corner. leftdown; else if (E. Y <= recarrow [6]. bottom & E. y> = recarrow [6]. top & E. x> = recarrow [6]. left & E. x <= recarrow [6]. right) // upper right Arow = arrowtype. rightup; else if (E. Y <= recarrow [7]. bottom & E. Y> = recarrow [7]. top & E. x> = recarrow [7]. left & E. x <= recarrow [7]. right) // Arow = arrowtype in the lower right corner. rightdown; else if (E. Y <= recarrow [0]. bottom & E. y> = recarrow [0]. top) // Arow = arrowtype. up; else if (E. Y <= recarrow [1]. bottom & E. y> = recarrow [1]. top) // Arow = arrowtype. down; else if (E. x> = recarrow [2]. left & E. x <= recarrow [2]. right) // left Arow = arrowtype. left; else if (E. x> = recarrow [3]. Left & E. x <= recarrow [3]. right) // right Arow = arrowtype. right; else Arow = arrowtype. none; L. offset (T. x-this. m_mousepoint.x, T. y-this. m_mousepoint.y); If (Arow! = Arrowtype. none) resize (E); else {This. location = L; refresh (); // This sentence is very important to re-draw immediately. Otherwise, Kaka may occur when you drag it. I found the cause for half a day.} public void resize (mouseeventargs E) {point T = This. pointtoscreen (E. location); point L = This. m_lastpoint; L. offset (T. x-this. m_mousepoint.x, T. y-this. m_mousepoint.y); Switch (Arow) {Case arrowtype. up: {This. height = m_size.height-(T. y-this. m_mousepoint.y); this. location = new point (m_lastpoint.x, L. y); break;} case arrowtype. down: {This. height = m_size.height + (T. y-this. m_mousepoint.y); break;} case arrowtype. left: {This. width = m_size.width-(T. x-this. m_mousepoint.x); this. location = new point (L. x, m_lastpoint.y); break;} case arrowtype. right: {This. width = m_size.width + (T. x-this. m_mousepoint.x); break;} case arrowtype. leftup: {This. width = m_size.width-(T. x-this. m_mousepoint.x); this. height = m_size.height-(T. y-this. m_mousepoint.y); this. location = new point (L. x, L. y); break;} case arrowtype. leftdown: {This. width = m_size.width-(T. x-this. m_mousepoint.x); this. height = m_size.height + (T. y-this. m_mousepoint.y); this. location = new point (L. x, m_lastpoint.y); break;} case arrowtype. rightup: {This. width = m_size.width + (T. x-this. m_mousepoint.x); this. height = m_size.height-(T. y-this. m_mousepoint.y); this. location = new point (m_lastpoint.x, L. y); break;} case arrowtype. rightdown: {This. width = m_size.width + (T. x-this. m_mousepoint.x); this. height = m_size.height + (T. y-this. m_mousepoint.y); break;} This. refresh ();} public Enum arrowtype {up, down, left, right, leftup, leftdown, rightup, rightdown, none} public arrowtype Arow = arrowtype. none; rectangle [] recarrow = new rectangle [8]; // eight controllers public rectangle area; // select the Region Public readonly int blank = 8; // margin protected override void onpaint (painteventargs e) {int side = 6; // recarrow [0] = new rectangle (new point (this. width/2-side/2, blank-side/2), new size (side, side); recarrow [1] = new rectangle (new point (this. width/2-side/2, this. height-blank-side/2), new size (side, side); recarrow [2] = new rectangle (new point (blank-side/2, this. height/2-side/2), new size (side, side); recarrow [3] = new rectangle (new point (this. width-blank-side/2, this. height/2-side/2), new size (side, side); recarrow [4] = new rectangle (new point (blank-side/2, blank-side/2), new size (side, side); recarrow [5] = new rectangle (new point (blank-side/2, this. height-blank-side/2), new size (side, side); recarrow [6] = new rectangle (new point (this. width-blank-side/2, blank-side/2), new size (side, side); recarrow [7] = new rectangle (new point (this. width-blank-side/2, this. height-blank-side/2), new size (side, side); foreach (rectangle item in recarrow) E. graphics. drawrectangle (pens. red, item); Area = new rectangle (new point (8, 8), new size (this. width-8*2, this. height-8*2); // when the semi-transparent effect is added, the card becomes fierce when the re-painting is good. We look forward to a solution E. graphics. smoothingmode = system. drawing. drawing2d. smoothingmode. antialias; system. drawing. color cor = system. drawing. color. fromargb (50, color. red); system. drawing. solidbrush bsh = new system. drawing. solidbrush (CoR); E. graphics. fillrectangle (bsh, area); E. graphics. drawrectangle (pens. red, area );}

At last, a code with a feather effect is deducted from a foreigner's website, which can be used up by the boss.
Now let's go:

Do you want to say that this figure is awesome ;)
This is the download link of the Test Program (with source code ).

Some friends may say that the drag is still flashing. I only tried to achieve this level. At least the functions are all implemented and are being improved...
If you want to use the source code, send an email to you. If you want to use the source code together with the graph, most of them will be directed at the graph ;).

I edited the source code again and sent it out. Don't leave your mailbox, buddy.