DrawLines over picturebox Image on mouse click

Question

3.00/5 (1 vote)

See more:

Dear Friends,

I am drawing lines on mouse click(pictureBox1_MouseClick event) over an image in picturebox ,but after two clicks over image ,the image get disappears.

Below code is drawing lines but over a blank picturebox because image is getting disappear after two clicks....

Please help me if there is another way to do this or some modification in this code.....

C#

namespace ImageSelection
{
    public partial class Form2 : Form
    {
        int iNumberofClicks = 0;
        Point[] pointArray = new Point[100];
        public Form2()
        {
            InitializeComponent();
        }

        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            pointArray[iNumberofClicks].X = e.X;
            pointArray[iNumberofClicks].Y = e.Y;
            Pen PenSpikes = new Pen(Color.Green);
            SolidBrush solidBrush = new SolidBrush(Color.Blue);
            iNumberofClicks++;
            if (iNumberofClicks > 1)
            {
                Point[] CurrentpointArray = new Point[iNumberofClicks];

                for (int i = 0; i < iNumberofClicks; i++)
                {
                    CurrentpointArray[i].X = pointArray[i].X;
                    CurrentpointArray[i].Y = pointArray[i].Y;
                }

                Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);
                Graphics offScreenDC = Graphics.FromImage(canvas);
                offScreenDC.DrawLines(PenSpikes, CurrentpointArray);
            
                pictureBox1.Image = canvas;
                offScreenDC.Dispose();
            }
            Point mousePnt = PointToClient(Cursor.Position);
            label2.Visible = true;
            label2.Text = mousePnt.ToString();
        }

        
    }
}

Thanks in advance.......

Posted 18-May-12 0:35am

rahulbhadouria

Updated 18-May-12 0:50am

v3

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mr. Mahesh Patel · Accepted Answer · 2012-05-18T00:50:00

Hi Dear, You have to three methods as like under

C#

private void PicCapPhoto_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
      {

          try
          {
              if (e.Button == System.Windows.Forms.MouseButtons.Left)
              {
                  cropX = e.X;
                  cropY = e.Y;

                  cropPen = new Pen(cropPenColor, cropPenSize);
                  cropPen.DashStyle = DashStyle.DashDotDot;
                  Cursor = Cursors.Cross;

              }
              picCapture.Refresh();
          }
          catch (Exception ex)
          {
          }

      }

      private void PicCapPhoto_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
      {

          try
          {
              if (PicCapPhoto.Image == null)
                  return;


              if (e.Button == System.Windows.Forms.MouseButtons.Left)
              {
                  PicCapPhoto.Refresh();
                  cropWidth = e.X - cropX;
                  cropHeight = e.Y - cropY;
                  PicCapPhoto.CreateGraphics().DrawRectangle(cropPen, cropX, cropY, cropWidth, cropHeight);
              }

          }
          catch (Exception ex)
          {

              return;
          }
      }

      private void PicCapPhoto_MouseUp(object sender, System.Windows.Forms.MouseEventArgs e)
      {
          try
          {
              Cursor = Cursors.Default;
              if (cropWidth < 1)
              {
                  return;
              }
              Rectangle rect = new Rectangle(cropX, cropY, cropWidth, cropHeight);

              Bitmap bit = new Bitmap(PicCapPhoto.Image, PicCapPhoto.Width, PicCapPhoto.Height);

              cropBitmap = new Bitmap(cropWidth, cropHeight);
              Graphics g = Graphics.FromImage(cropBitmap);
              g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
              g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
              g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
              g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel);

              msnew = new MemoryStream();
              cropBitmap.Save(msnew, System.Drawing.Imaging.ImageFormat.Jpeg);

              PictureBox1.Image = cropBitmap;

          }
          catch (Exception ex)
          {
              MessageBox.Show(ex.Message.ToString(), "Error in Generate photo", MessageBoxButtons.OK, MessageBoxIcon.Error, MessageBoxDefaultButton.Button1);

          }

      }

It Will Work fine.

Mahesh Patel
MCA-2012
09924625962

sjelen · Accepted Answer · 2012-05-18T00:51:00

Image disapears because on second click you generate new bitmap and assign it to pictureBox:

C#

pictureBox1.Image = canvas;

'overwriting' the original image. In another words, you're not drawing lines on existing image, you are drawing on blank image.

To draw over use:

C#

Graphics offScreenDC = Graphics.FromImage(pictureBox1.Image);
...
offScreenDC.Dispose();
pictureBox1.Refresh();

You don't need Bitmap canvas and I don't understand why do you copy pointArray to CurrentpointArray - you can use pointArray directly.

Stephen Hewison · Accepted Answer · 2012-05-18T00:54:00

Hi,

This line:

C#

Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);

Creates a new image. If there's a pre-existing image in the picture box, this will after the second click, note:

C#

if (iNumberofClicks > 1)

create a new blank image. This means the image written back to the picture box is new and should contain only your lines.

If drawing over an existing image you'll either need to store the base image and redraw all the lines each time a new one is added. Or more efficiently, only worry about the latest line keep adding just single lines to the existing image.

Here is your code updated.

C#

namespace ImageSelection
{
    public partial class Form2 : Form
    {

        Point lastPoint = null;
        public Form2()
        {
            InitializeComponent();
        }
 
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point Currentpoint = new Point();
            Currentpoint.X = e.X;
            Currentpoint.Y = e.Y;

            if (lastPoint != null)
            {
 
                Bitmap canvas = pictureBox1.Image;
                Graphics offScreenDC = Graphics.FromImage(canvas);
                offScreenDC.DrawLine(PenSpikes, lastPoint, Currentpoint);
            
                pictureBox1.Image = canvas;
                offScreenDC.Dispose();
            }

            lastPoint = Currentpoint;

        }
 
        
    }
}

Fredrik Bornander · Accepted Answer · 2012-05-18T00:57:00

You're overwriting the image on the picture box, if you first draw that onto your offscreen then your code works;

C#

pointArray[iNumberofClicks].X = e.X;
pointArray[iNumberofClicks].Y = e.Y;
Pen PenSpikes = new Pen(Color.Green);
SolidBrush solidBrush = new SolidBrush(Color.Blue);
iNumberofClicks++;
if (iNumberofClicks > 1)
{
  Point[] CurrentpointArray = new Point[iNumberofClicks];

  for (int i = 0; i < iNumberofClicks; i++)
  {
    CurrentpointArray[i].X = pointArray[i].X;
    CurrentpointArray[i].Y = pointArray[i].Y;
  }

  Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);
  Graphics offScreenDC = Graphics.FromImage(canvas);
  // New line!
  offScreenDC.DrawImage(pictureBox1.Image, new Point());
  offScreenDC.DrawLines(PenSpikes, CurrentpointArray);

  pictureBox1.Image = canvas;
  offScreenDC.Dispose();
}

Hope this helps,
Fredrik

DrawLines over picturebox Image on mouse click

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0