Drawing Circle over image RRS feed

  • Question

  • User-1217361591 posted
    Hi There,
    I would like some help drawing a circle over an image in asp.net
    The goal is, whe we click over the image, the page submits and the the image apperas with a small circle in the place we have clicked.
    What's the best solution for this ?
    Thanks in advance
    Wednesday, November 30, 2005 11:01 AM

All replies

  • User2128074059 posted
    You can use javascript to capture the mouse when you move over the image. And submit the mouse position to your aspx page to process the image.
    Friday, December 2, 2005 5:32 AM
  • User-1372641848 posted

    Check this sample code. and live sample, I have used ImageButton which renders as input type=image.




    Part 1 : aspx page. gdiimageclick.aspx

    <%@ Page Language="C#" %>

    <%@ Import Namespace="System.Drawing" %>

    <script runat="server">

    protected void ImageClicked(object sender, ImageClickEventArgs e){

    Graphics g = Graphics.FromImage(GetImageFromSession());

    g.DrawEllipse(Pens.Red, e.X - 4, e.Y - 4, 8, 8);


    Bitmap GetImageFromSession(){

    if (Session["MtXMLXImage"] == null){

    Session.Add("MtXMLXImage", new Bitmap(200, 200));


    return (Bitmap)Session["MtXMLXImage"];





    <title>Sample of ImageClick.</title>



    <form runat="server">

    <p>Click on square. to mark click.</p>

    <asp:ImageButton ID="ImageBtn" runat="server" ImageUrl="GDIImageClick.ashx" OnClick="ImageClicked"/>





    Part : 2 : Handler GDIImageClick.ashx

    <%@ WebHandler Language="C#" Class="GDIImageClick" %>

    using System;

    using System.Web;

    using System.Drawing;

    using System.Web.SessionState;

    public class GDIImageClick : IHttpHandler,IRequiresSessionState{

    public void ProcessRequest (HttpContext context) {

    context.Response.ContentType = "image/pjpeg";

    GetImageFromSession(context).Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);


    public bool IsReusable {

    get {return false;}


    Bitmap GetImageFromSession(HttpContext context){

    if (context.Session["MtXMLXImage"] == null){

    Bitmap image = new Bitmap(200, 200);

    Graphics g = Graphics.FromImage(image);


    g.DrawRectangle(Pens.Black, 0, 0, image.Width-1, image.Height-1);


    context.Session.Add("MtXMLXImage", image);


    return (Bitmap)context.Session["MtXMLXImage"];



    Friday, December 2, 2005 4:07 PM
  • User-1217361591 posted

    Hello Jigar and thank you very much for your comment, it was very helpfull.

    Altought a had some probles understading Handler GDIImageClick.ashx and was unable to do it in vb.net, i still was able to change it to use a customized picture instead a new bitmap (200,200)

    The problem is that it doesn't work inside a frame, it only works on a single page, inside a frame it never appears the red circle.

    Do you know why ?

    Tks again


    Tuesday, December 13, 2005 9:11 AM
  • User872255475 posted

    When drawing a circle, you must place your pen on the paper somewhere to start. Before you do this, you are at point 0 (zero), meaning you haven't drawn anything. And then once you finish drawing your circle you will have reached your goal. You will have drawn 1 (one) circle. So to draw a circle, you must go through the points between 0 and 1.

    To get from 0 to 1 will take a certain number of steps. How many is up to you. The number of steps determines the number of sides your "polygon" will have. "Polygon?" you say, "I thought we were drawing a circle." Well sure, theoretically. Circles have an infinite number of points around their circumference, but we don't have an infinite amount of time to plot out every possible point, so we're going to approximate our circle by using a finite set of points. When we connect these points we will have a regular polygon. For this example I'm going to take 100 steps from 0 to 1 which will make a 100 sided polygon that is going to look a LOT like a circle.



    <a href="http://www.proxydb.net ""nofollow"WideCircles </a>


    Friday, August 29, 2008 3:56 AM