Crop area selection control(like photoshop's) in c# windows form

Question

how to develop a crop selection control like photoshop's in c# 4.0 in widows form application.
 
I have a windows form application in c# 4.0 that can crop images. At first you have to draw a rectangle using mouse to select the cropped region.

private Point _pt;
 private Point _pt2;
private void picBoxImageProcessing_MouseDown(object sender, MouseEventArgs e)
{
    //// Starting point of the selection:
    //if (e.Button == MouseButtons.Left)
    //{
    //    _selecting = true;
    //    _selection = new Rectangle(new Point(e.X, e.Y), new Size());
    //}

    if (e.Button == MouseButtons.Left)
    {
        int ix = (int)(e.X / _zoom);
        int iy = (int)(e.Y / _zoom);
 
        //reset _pt2
        _pt2 = new Point(0, 0);
        _pt = new Point(ix, iy);
 
        // pictureBox1.Invalidate();
        picBoxImageProcessing.Invalidate();
    }
}
 
private void picBoxImageProcessing_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left && _selecting)
    {
        _selecting = false;
    }
}
 
private void picBoxImageProcessing_Paint(object sender, PaintEventArgs e)
{
    //if (_selecting)
    //{
    //    // Draw a rectangle displaying the current selection
    //    Pen pen = new Pen(Color.Red, 4);
    //    e.Graphics.DrawRectangle(pen, _selection);
    //}

    if (_selecting &&_pt.X >= 0 && _pt.Y >= 0 && _pt2.X >= 0 && _pt2.Y >= 0)
    {
 
        e.Graphics.DrawRectangle(pen, _pt.X * _zoom, _pt.Y * _zoom, (_pt2.X - _pt.X) * _zoom, (_pt2.Y - _pt.Y) * _zoom);
    }
}
 
private void picBoxImageProcessing_MouseMove(object sender, MouseEventArgs e)
{
    // Update the actual size of the selection:
    //if (_selecting)
    //{
    //    _selection.Width = e.X - _selection.X;
    //    _selection.Height = e.Y - _selection.Y;

    //    // Redraw the picturebox:
    //    picBoxImageProcessing.Refresh();
    //}

    if (e.Button == MouseButtons.Left)
    {
        _selecting = true;
        int ix = (int)(e.X / _zoom);
        int iy = (int)(e.Y / _zoom);
 
        _pt2 = new Point(ix, iy);
 
        //  pictureBox1.Invalidate();
        picBoxImageProcessing.Invalidate();
    }
}

there is no problem to draw the rectangle by mouse dragging. But if i want to change the height or width of the rectangle then I have to draw a new rectangle, that i don't want. I want to change the height and width of the rectangle by modifying the drawn rectangle instead of drawing a new rectangle.

I don’t want to know how to crop. I need to draw a resizable rectangle on the image as we can do in photoshop.

So I need a crop selection control like photoshop's crop control.

 

Answer 1

You need to define, draw and maintain draggable handles for the drawn rectangle.  By process of hit testing, you can check whether the mouse is over one of the handles, and then proceed to modify the existing rectangle as opposed to creating a new one.  The dimensions of the rectangle being modified would depend on the actual handle the user is dragging.

---

Jose R. MCP

Answer 2

Coould you please provide sample code?

Answer 3

The proper coding of such a thing is not trivial and unfortunately I don't have sample code written and I don't have the time to write it.  You need to investigate first and foremost about how the process of drawing a window works, including best practices.  You seem to already know a bit (or maybe a lot?) about this as I see you using Invalidate().  That's good.

Second, if you studied the previous point, you know by now that a window needs to save enough information so that whenever a WM_PAINT message arrives you can fully redraw the window as fast as possible.

Third:  You can take advantage of the invalidated region to optimize your drawing by only redrawing the elements inside the update region.  Tip:  If you conceptualize your user interface elements into regions, you can use the regions API (.Net has classes for this) to determine rather easily which elements need to be redrawn.

Fourth:  The regions of user interface elements will also serve you well whenever you receive WM_NCHITTEST.   This aids in the setting of the mouse cursor.  Usually after a WM_NCHITTEST message comes a WM_SETCURSOR message.  This means you can provide a different cursor whenever the mouse is over some part of the control that represents a draggable handle.

That should be covering the basics for you to succeed in your endeavour.  It is not trivial, but it is most certainly doable.

---

Jose R. MCP