Question

I am creating a image viewer sort of application. I am on Windows and using .Net

In my app, I am trying to highlight a Particular area while dragging.
I have created a Rectangle.

Rectangle areaRect = new Rectangle(100,100, 300, 300);
Point ptOld = new Point(0, 0);
Pen rectPen = new Pen(Brushes.White, 3);

protected override void OnPaint(PaintEventArgs e)
{
  Graphics dcPaint = e.Graphics;
  dcPaint.DrawRectangle(rectPen, areaRect);
}

Now I am dragging this rectangular area along with my mouse movements.

protected override void OnMouseMove(MouseEventArgs e)
{
 Point ptNew = new Point(e.X, e.Y);
 int dx = ptNew.X - ptOld.X;
 int dy = ptNew.Y - ptOld.Y;
 areaRect.Offset(dx, dy);
 MoveRect(ptNew);
 ptOld = ptNew;
}

Here I am trying to move this rect along with my mouse

void MoveRect(Point point)
{
 Graphics grfxClient = CreateGraphics();
 Rectangle tempRectangle = new Rectangle(areaRect.Left, areaRect.Top, areaRect.Width,   areaRect.Height);
 grfxClient.DrawRectangle(rectPen, tempRectangle);
 this.Invalidate();
 grfxClient.Dispose();
}

My Code till this point is working fine.
Now I would like to darken the INVERSE drag Area (The area which is outside the drag region), I mean the area which is within this Rectangle should gets highlighted while dragging.

Any idea how to proceed.

Thanks.

-Pankaj

Answer 1

I suppose you can do it by creating a Region object that covers the outside of the rectangle and fill it with a semi-transparent SolidBrush to make it look darkened.

You also don’t have to create a graphics and draw in OnMouseMove event, but just shift the rectangle and invalidate the surface of the control you are drawing on.

The code I used looks more or less like this:

Rectangle areaRect = new Rectangle(100,100, 300, 300);
Point ptOld = new Point(0, 0);
Pen rectPen = new Pen(Brushes.White, 3);

//A new field with a semi-transparent brush to paint the outside of the rectangle
Brush dimmingBrush = new SolidBrush(Color.FromArgb(128, 0, 0, 0));

protected override void OnPaint(PaintEventArgs e)
{
    Region outsideRegion = new System.Drawing.Region(e.ClipRectangle);
    outsideRegion.Exclude(areaRect);
    Graphics dcPaint = e.Graphics;
    dcPaint.FillRegion(dimmingBrush, outsideRegion);
    dcPaint.DrawRectangle(rectPen, areaRect);
}

protected override void OnMouseMove(MouseEventArgs e)
{
    Point ptNew = new Point(e.X, e.Y);
    int dx = ptNew.X - ptOld.X;
    int dy = ptNew.Y - ptOld.Y;
    areaRect.Offset(dx, dy);
    ptOld = ptNew;
    this.Invalidate();
}

The method named MoveRect is not needed.

It now seems to work as you wanted it to.

Suggestions

I also have some suggestions. You don’t have to use them, maybe they will be helpful for you.

You haven’t written what kind of control you are using to draw on (or overriding Form methods and painting directly on it), but I suggest you to use a PictureBox control, create a custom control derived from it and override its events. This should make the painting process smooth and prevent flickering. To do it this way:

• Create a new user control by selecting Add and User Control… and name a new control i.e. MyPictureBox

• change the parent class of the control, so it should now contain the line:

  public partial class MyPictureBox : PictureBox
  

• open file MyPictureBox.Designer.cs and comment out these lines:

  //this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
  //this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
  

• copy the code I posted in this answer and add line base.OnPaint(e); and the beginning of OnPaint method

• compile the project

• now you should be able to open designer of your main form, drag MyPictureBox control from the toolbox and use it without additional code needed

You also might consider changing the behaviour of the highlighted area, so mouse cursor was in the center of it. I suppose it would be more intuitive to the user.

If you have any issues with the code, just write it in the comments and I’ll try to help :).