How to add shape to an existent Picturebox image C# - c#

I have created an Image and I want to add a rectangle around the image and recreate it as Image again to be drawn in a PictureBox
but I'm getting out of memory exception
How can I modify the image.
public void Draw(SizeF size)
{
int scale = 100;
Graphics refGraph = this.CreateGraphics();
IntPtr hdc = refGraph.GetHdc();
SolidBrush brush = new SolidBrush(Color.Black);
Pen pen = new Pen(Color.Black, 4);
try
{
Metafile image = new Metafile(hdc, EmfType.EmfOnly, "Shapes");
using (Graphics g = Graphics.FromImage(image))
{
PointF center = new PointF((float)base.Width / 2, base.Height / 2);
//Draw a rect
RectangleF Block = new RectangleF(new PointF(center.X - size.Width * scale / 2, center.Y - size.Height * scale / 2), new SizeF(size.Width * scale, size.Height * scale));
g.FillRectangle(brush, Block);
}
//Image = image;
ModifyImage(image);
}
finally
{
refGraph.ReleaseHdc(hdc);
refGraph.Dispose();
pen.Dispose();
brush.Dispose();
}
Invalidate();
}
public void ModifyImage(Metafile image)
{
Graphics g = Graphics.FromImage(image);
PointF center = new PointF((float)Image.Width / 2, Image.Height / 2);
int bufferAmount = 5;
g.DrawRectangle(Pens.White, center.X - (Image.Width + bufferAmount) / 2, center.Y - (Image.Height + bufferAmount) / 2, Image.Width + bufferAmount, Image.Height + bufferAmount);
pictureBox.Image = image;
}
Thanks

You can create a Graphics from the image using the FromImage method, then use Graphics drawing methods to draw whatever you like. Here is a code sample:
System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(yourImage);
//you may use any pen
graphics.DrawRectangle(System.Drawing.Pens.Blue,0,0,yourImageWidth,yourImageHeight)
yourPictureBox.Image = yourImage;

Create a Graphics object from your image and draw onto it by using a Pen defining the border strength and its color:
using (var gfx = Graphics.FromImage(img))
{
using (var pen = new Pen(MYCOLOR, 3)
gfx.DrawRectangle(pen, MYRECT)
}
Note, this will manipulate your source image directly. If you want to have two images, one with and another without a border, you should clone your image before you draw over it:
var imgWithBorder = img.Clone();
// work with imgWithBorder ...

Related

How to save the image from picturebox including the drawn graphics on it?

i want to save the image in the pictureBox1 including the Graphics.
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
e.Graphics.DrawRectangle(Pens.Green, 0, 0, pictureBox1.Width - 1, pictureBox1.Height - 1);
Pen p = new Pen(Color.Red);
e.Graphics.DrawLine(p, 256, 0, 256, 512);
e.Graphics.DrawLine(p, 0, 256, 512, 256);
DrawPieOnPicturebox(e.Graphics);
}
public void DrawPieOnPicturebox(Graphics myPieGraphic)
{
Color myPieColors = Color.FromArgb(150, Color.LightGreen);
Size myPieSize = new Size((int)distanceFromCenterPixels, (int)distanceFromCenterPixels);
Point myPieLocation = new Point((pictureBox1.Width - myPieSize.Width) / 2, (pictureBox1.Height - myPieSize.Height) / 2);
DrawMyPie(myPiePercent, myPieColors, myPieGraphic, myPieLocation, myPieSize);
}
int counter = 0;
public void DrawMyPie(int myPiePerecent, Color myPieColor, Graphics myPieGraphic, Point
myPieLocation, Size myPieSize)
{
using (SolidBrush brush = new SolidBrush(myPieColor))
{
myPieGraphic.FillPie(brush, new Rectangle(myPieLocation, myPieSize), Convert.ToSingle(myPiePerecent * 360 / 100), Convert.ToSingle(15 * 360 / 100));
}
myBitmap = new Bitmap(pictureBox1.Image);
myBitmap.Save(#"d:\" + counter + "mybitmap1.bmp");
myBitmap.Dispose();
counter++;
}
it's saving the image in the pictureBox1 but without the drawn FillPie. i want to add to the saved bitmap also the drawn FillPie.
I think your best bet would be to use myPieGraphic.DrawImage followed by your myPieGraphic.FillPie, the use the myPieGraphic.Save method.
It's unclear how this is layered in your app but I'm assuming you have an Image in a Picturebox and then you draw on top of it using a Graphics?
Doing that will render to separate "Layers" so to speak they are not the same Image/Graphics. If you instead draw both the Image and your Pie using the same Graphics you can then save directly from it.
I think that will produce the result you want.
See link for all Graphics methods:
https://learn.microsoft.com/en-us/dotnet/api/system.drawing.graphics.addmetafilecomment?view=dotnet-plat-ext-7.0
Edit: Answering comment.
using(MemoryStream ms = new MemoryStream()) {
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
using (var fs = new FileStream(#"c:\temp\test.png", FileMode.Create))
{
var bytes = ms.ToArray();
await fs.WriteAsync(bytes , 0, bytes.Length);
}
}

Bitmap inside a bitmap

I am trying to insert an image 800x500 inside a blank bitmap of 850x610 in the center. The inner image should be in the center and It also has a title on the top. I am attaching an image to illustrate my idea:
public static Bitmap AddBorder(Bitmap srcImage)
{
Bitmap bmp = new Bitmap(srcImage.Width + 45, srcImage.Height + 100);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(srcImage, 0, 0);
g.DrawImage(srcImage, new Rectangle(bmp.Width - 1, 0, 1, bmp.Height));
g.DrawImage(srcImage, new Rectangle(0, bmp.Height - 1, bmp.Width, 1));
return bmp;
}
I have tried to draw it using drawRectangle, drawImage etc. But, I cannot pad it properly as illustrated in the above image. I also cannot add the border to inner image.
I want to get an idea about how to do that.
The below sample sets the new bitmap size, it fills it with a background (black), draws the image in the center and finally after measuring the text will align it in the center (width check only).
public static Bitmap AddBorder(Bitmap srcImage, string text)
{
Bitmap bmp = new Bitmap(850, 610);
using(Graphics g = Graphics.FromImage(bmp))
{
// Background
g.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));
// Source Image
Rectangle rect = new Rectangle(25, 55, 800, 500);
g.DrawImage(srcImage, rect);
// Border
int borderThickness = 2;
using(Pen pen = new System.Drawing.Pen(Brushes.Black, borderThickness))
{
pen.Alignment = System.Drawing.Drawing2D.PenAlignment.Inset;
g.DrawRectangle(pen, new Rectangle(rect.X - borderThickness, rect.Y - borderThickness, rect.Width + borderThickness, rect.Height + borderThickness));
}
// Text String
using (Font font = new Font("Arial", 16))
{
SizeF size = g.MeasureString(text, font);
g.DrawString(text, font, Brushes.Black, new PointF((bmp.Width / 2) - (size.Width / 2), rect.Top - (size.Height + borderThickness)));
}
}
return bmp;
}
Updated based on comments (Added also text above the centered image)!

rotating Graphics/ image in c#

I have the following code which i wrote to try and rotate a bitmap(this is a test) the idea is to take a bitmap and rotate it by some amount of degrees and then draw it on the screen using win forms
protected override void OnDoubleClick(EventArgs e)
{
base.OnDoubleClick(e);
Graphics g = this.CreateGraphics();
Bitmap b = new Bitmap(path);
g.Clear(Color.White);
imagePosition = Cursor.Position;
b = RotateImage(b, 45);
g.DrawImage(b, new Point(100, 100));
}
public Bitmap RotateImage(Bitmap b, float angle)
{
Bitmap returnBitmap = new Bitmap(b.Width, b.Height);
returnBitmap.SetResolution(b.HorizontalResolution, b.VerticalResolution);
Graphics g = Graphics.FromImage(returnBitmap);
g.TranslateTransform((float)b.Width / 2, (float)b.Height / 2);
g.RotateTransform(angle);
g.TranslateTransform(-(float)b.Width / 2, -(float)b.Height / 2);
g.DrawImage(b, new Point(0, 0));
return returnBitmap;
}
this is the image before rotation
and this is the image after rotating 45 degrees like was shown in the code
The reason it's getting clipped is that there isn't enough space to display it rotated. The diagonal is longer than the sides (Pythagoras).
You need to make more space for the image, then it should display OK. How you do that will depend on what the image is contained in.

C# merge two rotated bitmaps

I am trying to rotate two bitmaps, then copy the results into a third one.
Bitmap bmp_1 = new Bitmap(Program.Properties.Resources.MyImage); // 100x100 px
Bitmap bmp_2 = new Bitmap(Program.Properties.Resources.MyImage); // 100x100 px
Bitmap bmp_merged = new Bitmap(200, 100, PixelFormat.Format32bppArgb);
float angle, bw2, bh2;
using (Graphics g = Graphics.FromImage(bmp_merged))
{
using (Graphics graphics = Graphics.FromImage(bmp_1))
{
angle = 15;
bw2 = bmp_1.Width / 2f;
bh2 = bmp_1.Height / 2f;
graphics.TranslateTransform(bw2, bh2);
graphics.RotateTransform(angle);
graphics.TranslateTransform(-bw2, -bh2);
graphics.DrawImage(bmp_1, 0, 0);
}
using (Graphics graphics = Graphics.FromImage(bmp_2))
{
angle = 35;
bw2 = bmp_2.Width / 2f;
bh2 = bmp_2.Height / 2f;
graphics.TranslateTransform(bw2, bh2);
graphics.RotateTransform(angle);
graphics.TranslateTransform(-bw2, -bh2);
graphics.DrawImage(bmp_2, 0, 0);
}
g.DrawImage(bmp_1, 0, 0);
g.DrawImage(bmp_2, 100, 0);
}
Issue:
After using graphics.DrawImage(bmp_1, 0, 0); I expected that bmp_1 will be a rotated image.
But it's actually the original bmp_1 image and its rotated version drawn over it.
Drawing into a Graphics object obtained from a Bitmap instance doesn't clear the Bitmap instance first. It just draws on top of whatever was there.
Instead of modifying the bitmaps you start with, you should just draw them rotated into the destination. For example, something like this:
using (Graphics g = Graphics.FromImage(bmp_merged))
{
angle = 15;
bw2 = bmp_1.Width / 2f;
bh2 = bmp_1.Height / 2f;
g.TranslateTransform(bw2, bh2);
g.RotateTransform(angle);
g.TranslateTransform(-bw2, -bh2);
g.DrawImage(bmp_1, 0, 0);
angle = 35;
bw2 = bmp_2.Width / 2f;
bh2 = bmp_2.Height / 2f;
g.ResetTransform();
g.TranslateTransform(bw2, bh2);
g.RotateTransform(angle);
g.TranslateTransform(-bw2, -bh2);
g.DrawImage(bmp_2, 0, 0);
}
Naturally, you should really factor the code for drawing a bitmap rotated at a specific angle out into its own method, so that you don't have two copies of the code. But the above should address your basic problem.

Drawline with same pen width, but the line widths are different in result

I draw lines with the same pen, but the line widths are different in result. Why?
Bitmap b = new Bitmap(400, 400);
Graphics g = Graphics.FromImage(b);
g.PageUnit = GraphicsUnit.Point;
g.Clear(Color.White);
Pen pen = new Pen(Color.Red, 1.2f);
for (int i = 20; i < 200; i = i + 20)
{
g.DrawLine(pen, 10, i, 190, i);
}
g.Dispose();
b.Save("d:/temp/test.png", ImageFormat.Png);
b.Dispose()
Here is the result:
MSDN for GraphicsUnit
It's because you're working with Points and not Pixels and the variation in the width of the lines is the result of a rounding errors in the placement of the line and the width of the line in relation to how it gets rendered in pixels in the final product.
If you don't care about printing the image, it might be best to stick with Pixels.
Edit: If you want to continue using points, space things relative to your pen width:
Bitmap b = new Bitmap(400, 400);
Graphics g = Graphics.FromImage(b);
g.PageUnit = GraphicsUnit.Point;
g.Clear(Color.White);
Pen pen = new Pen(Color.Red, 1.2f);
for (float i = 20f * pen.Width; i < 200f * pen.Width; i = i + 20f * pen.Width)
{
g.DrawLine(pen, 10f, i, 190f, i);
}
g.Dispose();
b.Save("c:/temp/test.png", ImageFormat.Png);
b.Dispose();

Categories

Resources