Drawing over image - c#

I'm trying to draw a rectangle over an image, the rectangle is drawn but the image disappears.
My code:
private void button12_Click(object sender, EventArgs e)
{
currentBitmap = (Bitmap)pictureBox1.Image;
Bitmap temp1 = new Bitmap(currentBitmap.Height, currentBitmap.Width);
Bitmap bmap = (Bitmap)temp1.Clone();
Graphics gr = Graphics.FromImage(bmap);
Pen pen = new Pen(Color.Red);
gr.DrawRectangle(pen, 120, 120, 100, 100);
currentBitmap = (Bitmap)bmap.Clone();
pictureBox1.Image = currentBitmap;
}

Put your drawing methods inside the pictureBox1 onPaint Method. Then you call that using
pictureBox1.Paint += picturebox1_OnPaint;

I fixed this.
It was an error on my code which I didnt realize, i was just taking the width and height of the picturebox instead of the image data.
I changed
Bitmap temp1 = new Bitmap(currentBitmap.Height, currentBitmap.Width);
To
Bitmap temp1 = new Bitmap(pictureBox1.Image);

This is likely due to the fact that your image is set in pictureBox1. Try making a new pictureBox to overlay the old one:
pictureBox1 = image itself
pictureBox2 = bitmap
Good luck!

Related

How to save graphics created on a PictureBox?

In c# and Visual Studio Windows forms I have loaded an image into a picture box (pictureBox2) and then cropped it and show in another picture box (pictureBox3).
Now I want to save what is inside pictureBox3 as an image file.
How can I do this?
private void crop_bttn_Click(object sender, EventArgs e)
{
Image crop = GetCopyImage("grayScale.jpg");
pictureBox2.Image = crop;
Bitmap sourceBitmap = new Bitmap(pictureBox2.Image,
pictureBox2.Width, pictureBox2.Height);
Graphics g = pictureBox3.CreateGraphics();
g.DrawImage(sourceBitmap, new Rectangle(0, 0,
pictureBox3.Width, pictureBox3.Height), rectCropArea, GraphicsUnit.Pixel);
sourceBitmap.Dispose();
}
Never use control.CreateGraphics! Either draw into a Bitmap bmp using a Graphics g = Graphics.FromImage(bmp) or in the Paint event of a control, using the e.Graphics parameter..
Here is a cropping code that draws into a new Bitmap and that makes use of your controls etc but changes a few things:
It uses a Graphics object that is created from a new Bitmap
It make use of using clauses to make sure it won't leak
It takes the size of the pictureBox3.ClientSize so it won't include any borders..
private void crop_bttn_Click(object sender, EventArgs e)
{
Image crop = GetCopyImage("grayScale.jpg");
pictureBox2.Image = crop;
Bitmap targetBitmap = new Bitmap(pictureBox3.ClientSize.Width,
pictureBox3.ClientSize.Height);
using (Bitmap sourceBitmap = new Bitmap(pictureBox2.Image,
pictureBox2.ClientSize.Width, pictureBox2.ClientSize.Height))
{
using (Graphics g = Graphics.FromImage(targetBitmap))
{
g.DrawImage(sourceBitmap, new Rectangle(0, 0,
pictureBox3.ClientSize.Width, pictureBox3.ClientSize.Height),
rectCropArea, GraphicsUnit.Pixel);
}
}
if (pictureBox3.Image != null) pictureBox3.Image.Dispose();
pictureBox3.Image = targetBitmap;
targetBitmap.Save(somename, someFormat);
}
The alternative would be to..:
move all your code to the Paint event
replace the Graphics g = pictureBox3.CreateGraphics(); be Graphics g = e.Graphics;
insert these two lines to the click event:
Bitmap targetBitmap = new Bitmap(pictureBox3.ClientSize.Width,
pictureBox3.ClientSize.Height);
pictureBox3.DrawToBitmap(targetBitmap, pictureBox3.ClientRectangle);
The method PictureBox.CreateGraphics() should not be used unless you know what you are doing because it can cause some not-so-obvious problems. For example, in you scenario, the image in pictureBox3 will disappear when you minimize or resize the window.
A better way is to draw to a bitmap, which you also can save:
var croppedImage = new Bitmap(pictureBox3.Width, pictureBox3.Height);
var g = Graphics.FromImage(croppedImage);
g.DrawImage(crop, new Point(0, 0), rectCropArea, GraphicsUnit.Pixel);
g.Dispose();
//Now you can save the bitmap
croppedImage.Save(...);
pictureBox3.Image = croppedImage;
Btw, please use more reasonable variable names, especially for pictureBox1..3.

Reveal portions of an image behind another image

I have a PictureBox where I display an image (Let's call it Image1). There's a second image (Image2) which needs to be revealed as the user hovers the Image1 with the mouse. I only need to reveal part of Image2 (a 10X10 pixel size box), not the whole image as the mouse moves.
Both images are BMP.
How can I accomplish this task? I would think using overlays?
I display the Image1 in the picturebox and then I load the Image2 in memory, now I just need to display the portions of the Image2 over Image1 as the mouse moves.
Thank you,
Here is an example:
public Form1()
{
InitializeComponent();
pictureBox1.Image = Bitmap.FromFile(your1stImage);
bmp = (Bitmap)Bitmap.FromFile(your2ndImage);
pb2.Parent = pictureBox1;
pb2.Size = new Size(10,10);
/* this is for fun only: It restricts the overlay to a circle:
GraphicsPath gp = new GraphicsPath();
gp.AddEllipse(pb2.ClientRectangle);
pb2.Region = new Region(gp);
*/
}
Bitmap bmp;
PictureBox pb2 = new PictureBox();
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Rectangle rDest= pb2.ClientRectangle;
Point tLocation = new Point(e.Location.X - rDest.Width - 5,
e.Location.Y - rDest.Height - 5);
Rectangle rSrc= new Rectangle(tLocation, pb2.ClientSize);
using (Graphics G = pb2.CreateGraphics() )
{
G.DrawImage(bmp, rDest, rSrc, GraphicsUnit.Pixel);
}
pb2.Location = tLocation;
}
It uses offsets the overly to the top left of the Cursor adding a little for smooth movement..

drawing on image of a picturebox c#

Hello i am in problem with drawing in picturebox. I am trying to draw over a picturebox. picturebox contains an image.I draw a sine wave using drawline method. when the wave reaches the end of the width of picturebox then i use
g.Clear(pictureBox1.BackColor);
this clears the wave over the picturebox.But the problem is it also clears the image of the picturebox.I want draw a wave over a image and then clears it when it reaches the picturebox.width and again starts from the initial position. please help!
Graphics g;
g = pictureBox1.CreateGraphics();
g.DrawLine(System.Drawing.Pens.Crimson, ti, old_gval1, ti + trackBar1.Value, gval1);
usb.SpecifiedDevice.SendData(OUTBuffer);
old_gval1 = gval1;
ti = ti + trackBar1.Value;
if (ti > pictureBox1.Width) {
ti = 0;
g.Clear(pictureBox1.BackColor);
g.DrawLine(System.Drawing.Pens.Gray, 0, ((pictureBox1.Height - 1) - (gnd_val) * ((pictureBox1.Height - 10) / 1023f)), pictureBox1.Width, ((pictureBox1.Height - 1) - (gnd_val) * ((pictureBox1.Height - 10) / 1023f)));
g.DrawLine(System.Drawing.Pens.Gray, pictureBox1.Width / 2, 0, pictureBox1.Width/ 2,pictureBox1.Height);
}
You can use a special feature of the PictureBox:
It has not only the Image everybody is using but also a BackgroundImage usually overlooked.
You can paint freely on the Image and still keep a BackgroundImage untouched.
Obviosly you need to paint on a transparent Bitmap.
Here is some code:
// load the background image:
this.pictureBox1.BackgroundImage = new Bitmap(yourImageFileName);
// prepare the image:
Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
using (Graphics g = Graphics.FromImage(bmp) )
{
g.FillRectangle(Brushes.Transparent, new Rectangle(Point.Empty, bmp.Size) );
}
pictureBox1.Image = bmp;
Now paint stuff:
Random R = new Random();
private void button1_Click(object sender, EventArgs e)
{
Image bmp = pictureBox2.Image;
using (Graphics g = Graphics.FromImage(bmp))
{
g.DrawEllipse(Pens.Blue, R.Next(33), R.Next(33), R.Next(500), R.Next(500));
g.DrawEllipse(Pens.Red, R.Next(33), R.Next(33), R.Next(500), R.Next(500));
g.DrawEllipse(Pens.White, R.Next(33), R.Next(33), R.Next(500), R.Next(500));
}
pictureBox2.Image = bmp;
}
When your plotting has reached the right edge you would use a call to FillRectangle(Brushes.Transparent,.. to clear the foreground image and reset your x value.
Sounds like the cheapest solution to your problem.
You have two options here.
You could create your graphics from the image using Graphics.FromImage, then assign the image from that to the picture box.
Draw the image into your new Graphics object using Graphics.DrawImage.
It sounds like the latter might be a bit more appropriate for you, since you aren't actually altering the in-memory image. So every time you clear the Graphics instance, just draw in the Image.

Graphics.DrawString doesn't work

I want to draw a text over a PictureBox in a foreach loop. This is the code that is responsible for rendering(GG is a PictureBox that is currently in the loop)
if (GG != null)
{
((PictureBox)GG).Image = (Image)obj;
using (Graphics g = ((PictureBox)GG).CreateGraphics()) {
g.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
}
}
But sadly, the text is not rendered. If I comment out the
//((PictureBox)GG).Image = (Image)obj;
line, it does work! I have no idea how to get it to work.
I wanted to use the TextRenderer, but I don't know how to get an IDeviceContext of a control(and all examples I see on the internet use PaintEventArgs.Graphics in Paint event).
Also, if this is relevant, the GG PictureBox is a child of another picturebox, and has a transparent background.
I tried to refresh the box after invalidating, the working code:
if (GG != null)
{
((PictureBox)GG).Image = (Image)obj;
((PictureBox)GG).Invalidate();
((PictureBox)GG).Refresh();
using (Graphics g = ((PictureBox)GG).CreateGraphics()) {
g.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
}
}
You modified the image content but the PictureBox is completely unaware of that. You didn't reassign its Image property. You will need to tell it that it needs to redraw the image as displayed on the screen. Add this line of code:
GG.Invalidate();
Just draw on a Bitmap and show it in the PictureBox:
// A new bitmap with the same size as the PictureBox
var bitmap = new Bitmap(pictureBox.Width, pictureBox.Height);
//Get the graphics objectm which we can use to draw
var graphics = Graphics.FromImage(bitmap);
//Draw stuff
graphics.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
//Show the bitmap with graphics image in the PictureBox
pictureBox.Image = bitmap;
Image digidashboard = new Bitmap(Properties.Resources.digidashboard);
//using (Graphics g = ((PictureBox)pictureBoxDashboard).CreateGraphics())
//{
// g.DrawString("80.00", this.Font, new SolidBrush(Color.Red), 3, 6);
// pictureBoxUnlock.Image = digidashboard;
// pictureBoxDashboard.Invalidate();
//}
Graphics g = Graphics.FromImage(digidashboard);
g.DrawString("80.00", this.Font, new SolidBrush(Color.Red), 3, 6);
pictureBoxDashboard.Image = digidashboard;
According to StevenHouben's answer, I paste my C# version. It works fine. Thanks #StevenHouben.

how to capture part of a form

I want to capture part of my form and draw it in bitmap variable ...
when I use drawToBitmap() function and set rectangle(12,40,...),the function just capture from 0,0 point of the form.
then what do I do to solve this?
tanks for your help
Bitmap bmp = new Bitmap(((int)maxWidth)+2, ((int)maxHeight)+2);
this.DrawToBitmap(bmp,new Rectangle(0,40,((int)maxWidth)+2, ((int)maxHeight)+2));
Ok so what I did here was created a new form and added a button and a picture box. When you click the button it cuts a rectangle out of the Form and draws it to the picturebox.
I used -100,0 which moves the image 100 pixels to the left.
private void button1_Click(object sender, EventArgs e)
{
//The image we will be drawing on then passing to picturebox
Bitmap bmp=new Bitmap(pictureBox1.Width,pictureBox1.Height);
using (Graphics g=Graphics.FromImage(bmp))
{
using (Bitmap b = new Bitmap(this.Width, this.Height))
{
//captures the Form screenschot, and saves it into Bitmap b
this.DrawToBitmap(b, new Rectangle(0, 0, this.Width, this.Height));
//this draws the image from Bitmap b starting at the specified location to Bitmap bmp
g.DrawImageUnscaled(b, -100, 0);
}
}
//this assigns pictureBox1 the bmp Bitmap.
pictureBox1.Image = bmp;
}

Categories

Resources