how to draw drawings in picture box

Question

draw pictures in picture Box on Mouse dragging using c#

Photosphere

Answer 1

Put a PictureBox on your form, and set its BackColor to White. Then add this code to your form (you have to actually hook up the Mouse events below, i.e. you can't just copy and paste this code into your form):

private Point? _Previous = null;
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    _Previous = e.Location;
    pictureBox1_MouseMove(sender, e);
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (_Previous != null)
    {
        if (pictureBox1.Image == null)
        {
            Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
            using (Graphics g = Graphics.FromImage(bmp))
            {
                g.Clear(Color.White);
            }
            pictureBox1.Image = bmp;
        }
        using (Graphics g = Graphics.FromImage(pictureBox1.Image))
        {
            g.DrawLine(Pens.Black, _Previous.Value, e.Location);
        }
        pictureBox1.Invalidate();
        _Previous = e.Location;
    }
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    _Previous = null;
}

And then draw away!

If you like, you can improve the quality of the drawn image somewhat by setting the Graphics object's SmoothingMode property.

Update: .Net CF does't have the Pens collection, and MoustEventArgs doesn't have a Location, so here is a CF-friendly version:

private Point? _Previous = null;
private Pen _Pen = new Pen(Color.Black);
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    _Previous = new Point(e.X, e.Y);
    pictureBox1_MouseMove(sender, e);
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (_Previous != null)
    {
        if (pictureBox1.Image == null)
        {
            Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
            using (Graphics g = Graphics.FromImage(bmp))
            {
                g.Clear(Color.White);
            }
            pictureBox1.Image = bmp;
        }
        using (Graphics g = Graphics.FromImage(pictureBox1.Image))
        {
            g.DrawLine(_Pen, _Previous.Value.X, _Previous.Value.Y, e.X, e.Y);
        }
        pictureBox1.Invalidate();
        _Previous = new Point(e.X, e.Y);
    }
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    _Previous = null;
}

Aspersorium

thank's for the help, but i got error that don't know pens and e.location – Greenberg

@Gold: just added a CF-friendly version of this method, since CF doesn't have the Pens collection and MouseEventArgs doesn't have a Location (just X and Y). – Aspersorium

+1 for a long, detailed answer to a short, not-so-well-worded question. :) – Haughty

I had to change the code to: g.DrawLine(_Pen, _Previous.Value.X, _Previous.Value.Y, e.X, e.Y); to work for me in Win Mobile 6.5 – Miserable

@Tim: looks like that's a .NET CF 3.5 issue, but it might go back even further. Weird, because I thought I had run this code on an actual device, but maybe not. – Aspersorium

No worries - it was easy to fix - must be a later version of .NET. In any case, thanks for the code and +1 from me. – Miserable

I know this answer is quite old, but after painting away how you could save the file? – Iodometry

@EndermanAPM: pictureBox1.Image.Save(@"Path", ImageFormat.Jpeg); (replace @Path with a real path) – Aspersorium

Answer 2

Here, pictureBox1 == signature. I translated to vb in this manner:

Global:

Dim _previous As Point = Nothing
Dim _pen As Pen = New Pen(Color.Black)
Dim drawing As Boolean = False


''' <summary>
''' This handles the signature drawing events (drawing)
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub signature_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles signature.MouseMove
    If drawing = True Then
        If signature.Image Is Nothing Then
            Dim bmp As Bitmap = New Bitmap(signature.Width, signature.Height)

            Using g As Graphics = Graphics.FromImage(bmp)
                g.Clear(Color.White)
            End Using

            signature.Image = bmp
        End If

        Using g As Graphics = Graphics.FromImage(signature.Image)
            g.DrawLine(_pen, _previous.X, _previous.Y, e.X, e.Y)
        End Using
        signature.Invalidate()
        _previous = New Point(e.X, e.Y)
    End If
End Sub

''' <summary>
''' this indicates somebody is going to write a signature
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub signature_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles signature.MouseDown
    _previous = New Point(e.X, e.Y)
    drawing = True
    signature_MouseMove(sender, e)

End Sub

''' <summary>
''' the signature is done.
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub signature_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles signature.MouseUp
    _previous = Nothing
    drawing = False
End Sub

Flannel

Answer 3

You can do it by capturing the mousemove event of picture box then get graphics from picture box like .

Graphics g= pictureBox.CreateGraphics(); then u can draw whatever u want draw using this graphics object

Overseer

Eeeeep, god no! You'll get flickery graphics this way, the only usecase for .CreateGraphics() I know of is to measure strings. You want to override OnPaint instead. – Pierpont

or use the .Image property. If we're going to do custom drawing though i'd kill off picturebox completely and inherit from Control instead. – Pierpont