In .NET, How can I draw shapes on a picture ?

Question

I'm doing a software where I need to put squary bordering fields on a satelite map (.png image), so that the fields can be clicked.

What is the best way to add shapes on a picture and associate them with data ?

Answer 1

Overlay a custom-draw UserControl on top of the Image control. Make part of it transparent to reveal the underlying image, but still be able to capture the mouse interaction.

You will have to calculate the exact position (pixel offset from the map top-left corner) of your control to overlay the proper map area. How you calculate that offset and the actual size of your custom control depends on the map zoom level and whether you use GPS coordinates or image recognition to determine which area needs to be overlayed.

Answer 2

Your requirement seems very similar to what the HTML Image Map provides. Check this out, might be of help, http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/

Answer 3

Graphics.FillPolygon()

Is your friend. Hit testing is relatively trivial, with several algorithms available

Answer 4

You want to use the System.Drawing namespace to initially create a graphics object from your source image..then you want to draw on top of it, and finally export your edited graphics object to the filesystem...

Image image = Image.FromFile(Server.MapPath(String.Format("~/{0}.jpg", "YourImageNameHere")));                 
            Graphics MyGraphic = Graphics.FromImage(LabelImage);
            MyGraphic.DrawRectangle(SomePenObject, Point1, Point2, Point3, Point4);
            Image.Save("C:\somepath.jpg",ImageFormat.Jpeg);