Develop Reference

Panel to Image (DrawToBtimap doesn't work) [duplicate]

This question already has an answer here:
DrawToBitmap returning blank image
(1 answer)
Closed 3 years ago.
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;
}
}

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.

DrawImage method of Graphics class is making unintended clippings in the original image

I have this code to add bitmap to a picturebox
pictureBoxTemp.Image = finalImage;
Where finalImage variable is a bitmap holding the image. When I use this method. The result is good. Here is the image for this code:
And then, I decided to add zoom functionality so it is necessary to add a paint event on my picturebox.. This is my code for the paint event:
protected void pictureBox_Paint(object sender, PaintEventArgs e, ref ZoomInfo imageZoom)
{
//Conditions to avoid to proceed further.
if (((PictureBox)sender).Image == null) { return; }
float futurePosX = (imageZoom.translateX) * (1 - imageZoom.zoom) / imageZoom.zoom;
float futurePosY = (imageZoom.translateY) * (1 - imageZoom.zoom) / imageZoom.zoom;
Graphics g = e.Graphics;
g.Clear(Color.Transparent);
g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
g.ScaleTransform(imageZoom.zoom, imageZoom.zoom);
g.DrawImage(((PictureBox)sender).Image, futurePosX, futurePosY);
}
By default, futurePosY and futurePosX are both 0 so g.DrawImage() will draw it in 0,0 position. When paint is called, image is changed to this:
Notice that there is now a black region on the bottom of the image which means that the image is clipped.
I don't know for now why DrawImage() is clipping my image but when use pictureBox.Image = Bitmap again, the image fits perfectly on pictureBox. Any suggestions how to correct this?

Drawing line at different position of cursor

[![enter image description here][10]][10]
I am drawing a line on picture in picture Box and saving this picture in a folder(my computer). When i am trying to draw line, it draws line on different position rather than cursor position.
code---
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (paint)
{
Pen ppen = new Pen(Color.Black,1);
Bitmap bmp = new Bitmap(pictureBox1.Image);
try
{
Gr =Graphics.FromImage(bmp);
Gr.DrawLine(ppen,e.X,e.Y,Xold, Yold);
pictureBox1.Image = bmp;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message.ToString(), "Error",
MessageBoxButtons.OK, MessageBoxIcon.Exclamation);
}
}
Xold = e.X;
Yold = e.Y;
}

For this to work you need to make sure that the PB doesn't zoom or stretch (or even center) the image.
Set SizeMode = Normal !
If you need a different SizeMode you will have to do a little math to calculate the image coodinates form the image.Size and the PB.ClientSize..
The calculation is simple but will be different for each SizeMode:
For Center all you need is to add an offset to one of the coordinates.
For Zoom You need to calculate the zoom factor and multiply it into both coordinates.
And for Stretch you need to calculate the zoom factors of both dimensions independently and multiply it into each respective coordinate.
Btw: The way you draw lines by ading single lines will work only for simple Pens. Once you use semitransparent pens or fancy linecaps you will see artifacts at the junctions. If you need to avoid these, collect the points and use DrawLines (pl!) in the Paint event; then, upon MouseUp draw them into the Bitmap and then clear the list of points..

I need to render an image on top of a drawn Object

I need to make a program that'll enable the user to customize his own car.
My problem is I have to draw the customizables by code and I have to add a PNG image of details on top of the drawn car.
The user has to select the colors, rim designs, and decals from the right
The car will be drawn when the PIMP button is pressed.
I have to add the PNG image, the second image, on top of the drawn image(first image), to make it look like the third image.
My current code looks like:
private void button1_Click(object sender, EventArgs e)
{
Graphics g;
g = this.CreateGraphics();
if (color == 1)
{
g.FillPolygon(blue, body);
}
else if (color ==2)
{
g.FIllPolygon(red, body);
}
g.FillPolygon(blackBrush, window);
pCard.Visible = True;
//pCard is an existing PictureBox where the Image is the cardetails.PNG
backcolor = transparent
}
When I press the PIMP button it draws the first image, but when it draws the PictureBox of cardetails.png, the transparent color displays the color gray and covers the first image.
I am very new to C# and Visual Basic. The only thing i know how to do here is to draw that blue car.

Load the image that contains the details you want to add:
Image decalImage = Image.FromFile("cardetails.png");
It would probably be best if you do not load it in your button1_Click method.
Then draw the image upon your graphics object using
g.DrawImage(decalImage, x, y);
Where x and y would be the position to draw it to.

Invalidating a graphic

I have a got a graphic object of a rectangle this is created when the button on the picturebox is clicked but if the form is moved off the screen the graphic dissapears as well as the whole form it just goes white i have tried to invalidate the picturebox but this stops the button from working can anyone help me keep the object on the form using the invalidate method i know theres a way but i can't seem to grasp it
private void squareButton_Click(object sender, EventArgs e)
{
// Declaring a new graphics object has been assigned null
Graphics objGraphics = null;
// This will create the picture graphics to be drawn in the picturebox
objGraphics = PictureBox1.CreateGraphics();
// This will redraw the picture box with a fill chosen after the systemcolors
objGraphics.Clear(SystemColors.ControlDark);
// This will draw the rectangle with a red pen 10,10 represent position and 50,50 reprsent the width and height
objGraphics.DrawRectangle(Pens.Red, 10, 10, 50, 50);
// This will draw the rectangle
objGraphics.Dispose();
invalidate(PictureBox1);
// This is not redrawing the graphic it just shows a blank form
}

Try this:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
Graphics objGraphics = null;
// This will create the picture graphics to be drawn in the picturebox
objGraphics = e.Graphics;
// This will redraw the picture box with a fill chosen after the systemcolors
objGraphics.Clear(SystemColors.ControlDark);
// This will draw the rectangle with a red pen 10,10 represent position and 50,50 reprsent the width and height
objGraphics.DrawRectangle(Pens.Red, 10, 10, 50, 50);
// This will draw the rectangle
//objGrphics.Dispose();
}