Image annotations (Rectangle, Line, Circle, text) on IMageBox

[snagareddy]

Hi ,
I am using your image box control. It is very impressive. I have a small query. Can i draw some shapes on the image loaded in image Box. Like i want to add or delete rectangle, circle, lines, text etc.. Kindly assist me in this. Looking forward for your kind reply.
Just like the project mentioned in the link:
http://www.codeproject.com/Tips/711081/DrawTools


Thanks & regards
Naga Reddy

[Richard Moss]

Hello,

Welcome to the forums, and I'm glad you find the control useful. Although the demonstration program that comes with the control does include some custom drawing, I've added a dedicated demo you can download from this post.

Basically, you need to add your own code to the Paint event handler for the control, and then use the supplied Graphics object to do whatever custom painting you require. The ImageBox control provides a number of helper methods such as GetOffsetRectangle which can be used to take an absolute rectangle representing a point on your image, and translate it to fit the current scroll position and zoom level of the control. Another helpful hint is to use the current value of the ZoomFactor property to define a brush size.

For example, if you see the screenshot in the demo below, you can see the control is displaying an image comprised of two solid blue shapes, and one red outline shape.

[attachment id=0 msg=354]

By doing some custom painting on top of this, we draw outlines to the solid shapes, fill the outline shape, and if you scroll or zoom the control the custom drawing scales to fit.

Code Select Expand

      Rectangle shape;
      float penSize;

      penSize = (float)imageBox.ZoomFactor;

      // draw an outline around the top
      shape = imageBox.GetOffsetRectangle(50, 20, 100, 20);
      using (Pen pen = new Pen(Color.DarkRed, penSize))
      {
        g.DrawRectangle(pen, shape);
      }

      // fill the middle square
      shape = imageBox.GetOffsetRectangle(51, 51, 98, 98);
      g.FillRectangle(Brushes.Gold, shape);

      // draw an outline around the bottom
      shape = imageBox.GetOffsetRectangle(50, 160, 100, 20);
      using (Pen pen = new Pen(Color.DarkRed, penSize))
      {
        g.DrawRectangle(pen, shape);
      }


If you mean you want to be able to draw your own shapes using the mouse as a form of vector tool, that's a different kettle of fish - but if you check the ProcessSelection method of the ImageBox source you can see how to select regions which you could use as a base for your own code, or you could adapter something one of Rod Stephen's example projects to use the ImageBox, just remember that you'll always need to translate values in case the control is scrolled or zoomed.

Hope this helps.

Regards;
Richard Moss

[snagareddy]

Thank you Mr. Richard Moss. It was a great help. But again i am stuck with one problem. I am trying to replace the draw tool panel with your image box but i am not successful. Can you help me in integrating Your image box in place of drawing panel in below link.
http://www.codeproject.com/Articles/17893/Extensions-to-DrawTools

It will great help, i tried it but was not so successful. I am new to c# programming. So facing some difficulty.

Thanks in advance.

Naga Reddy

[Richard Moss]

I took a look at the project you mentioned, but integrating the ImageBox control into that is not a simple task. Just changing DrawArea to inherit from the ImageBox instead of UserControl is a good start, but you'll have to change an awful lot of code, for example the existing control has its own implementation for panning and zooming which would have to be removed or adjusted, and it approaches drawing content completely differently to how the ImageBox does it (the project uses matrix's to transform graphics, while ImageBox calculates things itself)

For a beginner project, that looks quite challenging, good luck with it!