Draw circle and X spots inside an image by list of x,y coordinates.Asp C#

Question

I have an asp:image

    <asp:Image ID="ImageMap1" runat="server" ImageUrl="~/images/court.jpg"></asp:Image>

Also I have 4 lists with int X,Y coordinates

      int[] GreenCircleX = new int[4] { 10, 20, 22, 25};
      int[] GreenCircleY = new int[4] { 10, 20, 22, 25};
      int[] RedxX = new int[4] { 15, 6, 50, 32};
      int[] RedxY = new int[4] { 15, 8, 50, 23};

I want to draw(if possible) green little circles from the GreenCircleX,Y coordinates inside the image : court.jpg .Also red X spots from RedxX,Y coordinates in the same image.There is no need to be anything clickable.

image court.jpg: enter image description here and possible result

Any suggestions?

What did stop you from trying out to implement it yourself? What problem are you facing explicitly? — DrCopyPaste, Apr 28 '14 at 14:55
I am able to use lists and integers but I don't know how to draw inside an image by c# — Apollon, Apr 28 '14 at 14:58
maybe this can get you started: http://stackoverflow.com/a/11403059/2186023 (yea i know line, not circle, but `drawing on an image` is essentially the same for both ;)) — DrCopyPaste, Apr 28 '14 at 15:24
is this be able to use for asp?How can I get the image as bitmap? — Apollon, Apr 28 '14 at 17:23
that is a different question, this is why you need to be precise in your questions as your initial question turns out to be in fact 2: 1. how to draw on an image loaded via file 2. how to get a dynamically drawn image onto an asp.net webpage — DrCopyPaste, Apr 29 '14 at 08:14
however this should help you with your second problem: http://stackoverflow.com/a/18233425/2186023 — DrCopyPaste, Apr 29 '14 at 08:14
did you take a look at the first link I posted? it is exactly about that, painting on an image that already exists (as a file) the second link is about getting that image to display in a web-browser, combine the to to fit your needs... (dynamically drawn image does not imply that there might not be a source image, it simply means that the image "returned" will be somehow calculated in a dynamic way) — DrCopyPaste, Apr 29 '14 at 09:44
Yes.Now I understand.So I must combine the two links.I will try it — Apollon, Apr 29 '14 at 09:54

Apollon · Accepted Answer · 2014-04-30T15:02:28.017

Finally I made it.As DrCopyPaste said you must load image, draw and save it.Draw green circle and red X with the following code.

       Bitmap bitMapIm = new
    System.Drawing.Bitmap(Server.MapPath(@"images\court.jpg"));
    Graphics graphicIm = Graphics.FromImage(bitMapIm);

    Pen penGreen = new Pen(Color.Green, 3);
    Pen penRed = new Pen(Color.Red, 3);
    for (int i = 0; i < GreenCircleX.Count; i++)
    {        
    graphicIm.DrawEllipse(penGreen, GreenCircleX[i] ,GreenCircleY[i], 7, 7);

    graphicIm.DrawString("X", new Font("Arial", 10, FontStyle.Bold), Brushes.Red, RedxX[i] ,RedxY[i]);
    }
    bitMapIm.Save(Server.MapPath(@"images\courtout.jpg"), ImageFormat.Jpeg);
    graphicIm.Dispose();
    bitMapIm.Dispose();

so I must use courtout.jpg as url

         <asp:Image ID="ImageMap1" runat="server" ImageUrl="~/images/courtout.jpg"></asp:Image>

Draw circle and X spots inside an image by list of x,y coordinates.Asp C#

1 Answers1