Panel to Image (DrawToBtimap doesn't work)

Question

I'm trying to make an application similar to Paint.

Everything works well, but I have a problem with saving the image to a file. The function for saving works okay, the file saves in the selected location, but it is empty when something is drawn.

It works only when I change the background color, then the image saves with this color.

When I 'draw' something like that

the saved image looks like this

Code:

private void saveToolStripMenuItem_Click(object sender, EventArgs e)
{
    int width = pnl_Draw.Width;
    int height = pnl_Draw.Height;

    Bitmap bm = new Bitmap(width, height);


    SaveFileDialog sf = new SaveFileDialog();
    sf.Filter = "Bitmap Image (.bmp)|*.bmp|Gif Image (.gif)|*.gif|JPEG Image (.jpeg)|*.jpeg|Png Image (.png)|*.png|Tiff Image (.tiff)|*.tiff|Wmf Image (.wmf)|*.wmf";
    sf.ShowDialog();
    var path = sf.FileName;

    pnl_Draw.DrawToBitmap(bm, new Rectangle(0, 0, width, height));
    bm.Save(path, ImageFormat.Jpeg);

}

Drawing:

  private void pnl_Draw_MouseMove(object sender, MouseEventArgs e)
    {
        if(startPaint)
        {
            //Setting the Pen BackColor and line Width
            Pen p = new Pen(btn_PenColor.BackColor,float.Parse(cmb_PenSize.Text));
            //Drawing the line.
            g.DrawLine(p, new Point(initX ?? e.X, initY ?? e.Y), new Point(e.X, e.Y));
            initX = e.X;
            initY = e.Y;
        }
    }

Answer 1

Where is your "g" (System.Drawing.Graphics?) object come from when you DrawLine on it? I also can't see where you fill the background color, but I have the suspiction that your drawing gets discarded/overwritten - but given the little code visible here, it's hard to tell.

I'd just suggest what worked for me in the past: Use a Bitmap object to draw your lines etc into, not the panel directly. And when you want to save it, just save the bitmap. To make the drawing visible on your panel, call Invalidate(...) on your panel after a new line stroke was made, with the bounding rectangle around the line stroke as the update-rectangle passed to Invalidate. In the OnPaint handler of your panel, then make sure to only draw that portion that's new, e.g. that rectangle I mentioned. This will be passed as the clip bounds of the OnPaint call. If only the changed portion of the whole image is drawn in the OnPaint handler, it will be much faster than always drawing the whole bitmap onto the panel. For that, you need to creage a graphics object from the drawn-to bitmap, and keep both the bitmap and the graphics object alive throughout your drawing session (i.e. don't let it get garbage collected by not having references to them somewhere)

Something roughly like this:

// assuming you're all doing this directly in your main form, as a simple experimental app:

// Somewhere in your form class:
Bitmap drawingBitmap;
Graphics gfx;


// in your form class' constructor, AFTER the InitializeComponent() call, so the sizes are known:
// using a pixelformat which usually yields good speed vs. non-premultiplied ones
drawingBitmap = new Bitmap( pnl.Width, pnl.Height, System.Drawing.Imaging.PixelFormat.Format32bppPArgb );
gfx = Graphics.FromImage( drawingBitmap );



private void pnl_Draw_MouseMove(object sender, MouseEventArgs e)
{
    if(startPaint)
    {
        //Setting the Pen BackColor and line Width
        Pen p = new Pen(btn_PenColor.BackColor,float.Parse(cmb_PenSize.Text));
        //Drawing the line.
        var p1 = new Point(initX ?? e.X, initY ?? e.Y);
        var p2 = new Point(e.X, e.Y);
        gfx.DrawLine( p, p1, p2 ); // !!! NOTE: gfx instance variable is used
        initX = e.X;
        initY = e.Y;

        // makes the panel's Paint handler being called soon - with a clip rectangle just covering your new little drawing stroke, not more.
        pnl.Invalidate( new Rectangle( p1.X, p1.Y, 1+p2.X-p1.X, 1+p2.Y-p1.Y ));
    }
}

private void pnl_Paint(object sender, PaintEventArgs e)
{
    var g = e.Graphics;
    // use the clip bounds of the Graphics object to draw only the relevant area, not always everything.
    var sourceBounds = new RectangleF( g.ClipRectangle.X, g.ClipRectangle.Y, g.ClipRectangle.Width, g.ClipRectangle.Height );

    // The bitmap and drawing panel are assumed to have the same size, to make things easier for this example.
    // Actually you might want have a drawing bitmap of a totally unrelated size, and need to apply scaling to a setting changeable by the user.
    g.DrawImage( drawingBitmap, g.ClipRectangle.X, g.ClipRectangle.Y, sourceBounds );
}

Here is a little bit about that, although pretty old article. But GDI+ hasn't change that much since then, as it's a wrapper around the Win32 drawing stuff. https://www.codeproject.com/Articles/1355/Professional-C-Graphics-with-GDI

NOTE: What I don't have time right now to check and do not remember is whether you are allowed to, at the same time:

• have an "open" graphics object of a bitmap and draw into the bitmap
• paint that same bitmap onto something else (like the panel)
• save the bitmap to file

You'd have to check that, and manage the existence of the graphics object with its claws on your drawing bitmap accordingly.