I have got a System.Drawing.Bitmap in my code.
The width is fix, the height varies.
What I want to do, is to add a white border around the bitmap, with about 20 pixel, to all 4 edges.
How would this work?
You could draw a rectangle behind the bitmap. The width of the rectangle would be (Bitmap.Width + BorderWidth * 2), and the position would be (Bitmap.Position - new Point(BorderWidth, BorderWidth)). Or at least that's the way I'd go about it.
EDIT:
Here is some actual source code explaining how to implement it (if you were to have a dedicated method to draw an image):
private void DrawBitmapWithBorder(Bitmap bmp, Point pos, Graphics g) {
const int borderSize = 20;
using (Brush border = new SolidBrush(Color.White /* Change it to whichever color you want. */)) {
g.FillRectangle(border, pos.X - borderSize, pos.Y - borderSize,
bmp.Width + borderSize, bmp.Height + borderSize);
}
g.DrawImage(bmp, pos);
}
You can use 'SetPixel' method of a Bitmap class, to set nesessary pixels with the color. But more convenient is to use 'Graphics' class, as shown below:
bmp = new Bitmap(FileName);
//bmp = new Bitmap(bmp, new System.Drawing.Size(40, 40));
System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
gr.DrawLine(new Pen(Brushes.White, 20), new Point(0, 0), new Point(0, 40));
gr.DrawLine(new Pen(Brushes.White, 20), new Point(0, 0), new Point(40, 0));
gr.DrawLine(new Pen(Brushes.White, 20), new Point(0, 40), new Point(40, 40));
gr.DrawLine(new Pen(Brushes.White, 20), new Point(40, 0), new Point(40, 40));
Below function will add border around the bitmap image. Original image will increase in size by the width of border.
private static Bitmap DrawBitmapWithBorder(Bitmap bmp, int borderSize = 10)
{
int newWidth = bmp.Width + (borderSize * 2);
int newHeight = bmp.Height + (borderSize * 2);
Image newImage = new Bitmap(newWidth, newHeight);
using (Graphics gfx = Graphics.FromImage(newImage))
{
using (Brush border = new SolidBrush(Color.White))
{
gfx.FillRectangle(border, 0, 0,
newWidth, newHeight);
}
gfx.DrawImage(bmp, new Rectangle(borderSize, borderSize, bmp.Width, bmp.Height));
}
return (Bitmap)newImage;
}
Related
How can i change the position of the "hello and test" string in the green box to the center position in an image ? I want to place the position of the hello string and the test in the middle of an image (which I marked the red circle), the link to the image> https://cdn.pbrd.co/images/I1hTWNS.png
I have added a "center" alignment but the position of the string is still to the left of the image.
public void drawString()
{
string firstText = "Hello" + Environment.NewLine + "Test";
string imageFilePath = directory + name + "\\Desktop\\plain.jpg";
Bitmap newBitmap;
using (var bitmap = (Bitmap)Image.FromFile(imageFilePath))//load the image file
{
using (Graphics graphics = Graphics.FromImage(bitmap))
{
using (Font arialFont = new Font("Arial", 26, FontStyle.Bold, GraphicsUnit.Point))
{
Rectangle rect = new Rectangle(0, 0, ClientSize.Width - 10, ClientSize.Height - 10);
StringFormat sf = new StringFormat();
sf.LineAlignment = StringAlignment.Center;
sf.Alignment = StringAlignment.Center;
graphics.DrawString(firstText, arialFont, Brushes.Red, rect, sf);
graphics.DrawRectangle(Pens.Green, rect);
}
}
newBitmap = new Bitmap(bitmap);
}
newBitmap.Save(imageFilePath);//save the image file
newBitmap.Dispose();
}
I have added a "center" alignment but the position of the string is still to the left of the image.
You text is indeed centered in the rectangle you created. The problem is that the rectangle you based it off the ClientSize Height and Width which come from the control you are inside.
What you want to use is the current Bitmap properties for Height and Width.
instead of :
Rectangle rect = new Rectangle(0, 0, ClientSize.Width - 10, ClientSize.Height - 10);
you want :
Rectangle rect = new Rectangle(0, 0, bitmap.Width, bitmap.Height);
I want to add a border to an Image.
To achieve that, I want to crate a new empty image with size equal to old size + border size, copy old image on center and draw border :
There is the method I wrote :
private Bitmap addBorderToImage(Image image, int borderSize)
{
Bitmap bmpTmp = new Bitmap(image);
Bitmap bmp = new Bitmap(bmpTmp.Width + 2 * borderSize,
bmpTmp.Height + 2 * borderSize,
bmpTmp.PixelFormat);
BitmapData data = bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), ImageLockMode.WriteOnly, PixelFormat.Format1bppIndexed);
BitmapData dataTmp = bmpTmp.LockBits(new Rectangle(0, 0, bmpTmp.Width, bmpTmp.Height), ImageLockMode.ReadOnly, PixelFormat.Format1bppIndexed);
// Copy the bytes from the image into a byte array
for (int y = 0; y < bmpTmp.Height; y++)
{
System.Runtime.InteropServices.Marshal.Copy(dataTmp.Scan0, y * data.Stride, (IntPtr)((long)data.Scan0 + data.Stride * y + borderSize), y * data.Stride);
}
bmp.UnlockBits(data);
bmpTmp.UnlockBits(data);
using (Graphics g = Graphics.FromImage(bmp))
{
g.DrawRectangle(new Pen(Brushes.Green, borderSize * 2), new Rectangle(0, 0, bmp.Width, bmp.Height));
}
return bmp;
}
But I'm unable to do a correct copy. I have error :
Argument 1: cannot convert from 'System.IntPtr' to 'byte[]'
How should I do the Marshal.Copy ?
Edit: I use Marshall.copy instead of graphics cause I can't create graphics element from Format1bppIndexed.
First Marshal.Copy is expecting a byte [] array that's why it doesn't compile.
Second, you don't need to have low byte manipulation as Graphics handles all operation you need for this job (this is an authentic XY problem).
Last, there are many undisposed object in your original code which will leads you to memory leaks.
What about the following :
private static Bitmap AddBorderToImage(Image image, int borderSize)
{
using (Bitmap bmp = new Bitmap(image.Width + 2 * borderSize,
image.Height + 2 * borderSize))
{
using (Graphics destGraph = Graphics.FromImage(bmp))
{
destGraph.FillRectangle(Brushes.Green, new Rectangle(new Point(0, 0), bmp.Size));
destGraph.DrawImage(image, new Point(borderSize, borderSize));
}
return bmp.Clone(new Rectangle(0, 0, bmp.Width, bmp.Height), image.PixelFormat);
}
}
The idea is as simple as this:
Create a new result bitmap with the background of border's color
Draw the inner original image at the correct place (borderSize, borderSize).
Clone the final result with original PixelFormat
I used System.Drawing and got the results. Hope this is what you were looking for.
private Bitmap AddBorder(Image original_image, int border_size, Color border_color)
{
Size originalSize = new Size(original_image.Width + border_size, original_image.Height + border_size);
Bitmap bmp = new Bitmap(originalSize.Width, originalSize.Height);
Rectangle rec = new Rectangle(new Point(0, 0), originalSize);
Pen pen = new Pen(border_color, border_size);
Graphics g = Graphics.FromImage(bmp);
g.DrawRectangle(pen, rec);
rec.Inflate(-border_size /2, -border_size /2);
g.DrawImage(original_image, rec);
return bmp;
}
I'm dynamically creating isometric tiles from standard top-down tiles from another game. The problem, though, is that the the image resize often ends up with some amount of pixels "missing" on either side. I understand they're not really missing and the code is working properly but I don't know enough about GDI to know what settings/tutorials to search for.
I take this: and turn it into this: .
It goes from 32x32 to 48x24, which is the correct proportion. However, on the left and bottom, the grass is one pixel short of reaching the edge of the image. I don't want to fix this manually as I'll be doing this for hundreds of tiles so I'd like to find a way to fix this in the code. The issue, in the end, is that the tiles end up with tiny one-pixel gaps between them.
Is there anything I can do with GDI other than just checking each image for the edge colors and adding them manually if they're missing/transparent?
Here's the code I used to do this. The commented out parts are some of the various settings I've been messing with:
Bitmap bmp = RotateImage(new Bitmap(fileName), 45);
bmp = ResizeImage(bmp, bmp.Width, bmp.Height / 2);
private static Bitmap RotateImage(Bitmap rotateMe, float angle)
{
//First, re-center the image in a larger image that has a margin/frame
//to compensate for the rotated image's increased size
var bmp = new Bitmap(rotateMe.Width + (rotateMe.Width / 2), rotateMe.Height + (rotateMe.Height / 2));
using (Graphics g = Graphics.FromImage(bmp))
g.DrawImageUnscaled(rotateMe, (rotateMe.Width / 4), (rotateMe.Height / 4), bmp.Width, bmp.Height);
rotateMe = bmp;
//Now, actually rotate the image
Bitmap rotatedImage = new Bitmap(rotateMe.Width, rotateMe.Height);
using (Graphics g = Graphics.FromImage(rotatedImage))
{
g.TranslateTransform(rotateMe.Width / 2, rotateMe.Height / 2); //set the rotation point as the center into the matrix
g.RotateTransform(angle); //rotate
g.TranslateTransform(-rotateMe.Width / 2, -rotateMe.Height / 2); //restore rotation point into the matrix
g.DrawImage(rotateMe, new Point(0, 0)); //draw the image on the new bitmap
}
return rotatedImage;
}
private static Bitmap ResizeImage(System.Drawing.Image image, int width, int height)
{
var destRect = new Rectangle(0, 0, width, height);
var destImage = new Bitmap(width, height);
destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);
using (var graphics = Graphics.FromImage(destImage))
{
//graphics.CompositingMode = CompositingMode.SourceCopy;
//graphics.CompositingQuality = CompositingQuality.HighQuality;
//graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
//graphics.SmoothingMode = SmoothingMode.HighQuality;
//graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.InterpolationMode = InterpolationMode.NearestNeighbor;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.SmoothingMode = SmoothingMode.AntiAlias;
using (var wrapMode = new ImageAttributes())
{
wrapMode.SetWrapMode(WrapMode.TileFlipXY);
graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
}
}
return destImage;
}
You might want to consider calculating the Width and Height of your rotated object.
For example:
private void button1_Click(object sender, EventArgs e)
{
var width = (int) numericUpDown2.Value;
var height = (int) numericUpDown3.Value;
var angle = (float) numericUpDown1.Value;
var size = new Size(width, height);
var result = RotatedSettings(angle, size);
textBox1.Text = String.Format("{0} x {1}", result.Width, result.Height);
}
private static Size RotatedSettings(float angle, Size size)
{
// setup corner values in array
var corners = new[]
{ new PointF(0, 0),
new PointF(size.Width, 0),
new PointF(0, size.Height),
new PointF(size.Width, size.Height)};
// rotate corners
var xc = corners.Select(p => Rotate(p, (float)angle).X);
var yc = corners.Select(p => Rotate(p, (float)angle).Y);
// find the new sizes by subtracting highest from lowest result.
var widths = xc as IList<float> ?? xc.ToList();
var newWidth = (int)Math.Abs(widths.Max() - widths.Min());
var heights = yc as IList<float> ?? yc.ToList();
var newHeight = (int)Math.Abs(heights.Max() - heights.Min());
// as we rotate the mid point we need to middle midpoint section and add the outcome to size.
var midX = ((size.Width / 2) - ((double)newWidth / 2));
var midY = ((size.Height / 2) - ((double)newHeight / 2));
return new Size(newWidth + (int)midX, newHeight + (int)midY);
}
/// <summary>
/// Rotates a point around the origin (0,0)
/// </summary>
private static PointF Rotate(PointF p, float angle)
{
// convert from angle to radians
var theta = Math.PI * angle / 180;
return new PointF(
(float)(Math.Cos(theta) * (p.X) - Math.Sin(theta) * (p.Y)),
(float)(Math.Sin(theta) * (p.X) + Math.Cos(theta) * (p.Y)));
}
I need to draw a rectangle that should be around the size 2X2 Inches when printed on a paper.
I know that i can draw a rectangle using
g.DrawRectangle(pen, 100,100, 100, 200);
This application will only be used in computers.How can i convert the inches to pixels properly so that i can get the desired dimensions when printed.
To make an image print in the right size by default, it needs to have the right combination of dpi and pixels.
Let's look at an example:
// aiming at 150dpi and 4x6 inches:
float dpi = 150;
float width = 4;
float height = 6;
using (Bitmap bmp = new Bitmap((int)(dpi * width), (int)(dpi * height)))
{
// first set the resolution
bmp.SetResolution(dpi, dpi);
// then create a suitable Graphics object:
using (Graphics G = Graphics.FromImage(bmp))
using (Pen pen = new Pen(Color.Orange))
{
pen.Alignment = System.Drawing.Drawing2D.PenAlignment.Center;
G.Clear(Color.FloralWhite);
// using pixels here:
Size sz = new System.Drawing.Size((int)dpi * 2 - 1, (int)dpi * 2 - 1);
G.DrawRectangle(pen, new Rectangle(new Point(0, 0), sz));
G.DrawRectangle(pen, new Rectangle(new Point(0, 300), sz));
G.DrawRectangle(pen, new Rectangle(new Point(0, 600), sz));
G.DrawRectangle(pen, new Rectangle(new Point(300, 0), sz));
G.DrawRectangle(pen, new Rectangle(new Point(300, 300), sz));
G.DrawRectangle(pen, new Rectangle(new Point(300, 600), sz));
// alternative code:
// we can also set the Graphics object to measure stuff in inches;
G.PageUnit = GraphicsUnit.Inch;
// or fractions of it, let's use 10th:
G.PageScale = 0.1f;
using (Pen pen2 = new Pen(Color.MediumPurple, 1f / dpi * G.PageScale))
{
// draw one rectangle offset by an inch:
G.DrawRectangle(pen2, 10f, 10f, 20f, 20f);
}
bmp.Save(#"D:\xxx.jpg", ImageFormat.Jpeg);
}
}
Note that I had to subtract 1 pixel from the drawn size as DrawRectangle overdraws by 1 pixel!
Note that the coordinates I draw at depend on the resolution! Also note how the jpeg format creates a lot of smeared colors. Pngcreates crisper results, especially once you print text..
Also note how I had to scale down the PenWidth in the alternative code!
On a single bitmap I need to display graphs and text values. So what I did is create a bitmap with points and creating a another bitmap with the text and place on the large bitmap.
I tried using the brush to write the text, but I am not able to see the underlying graphics even though trasparency is set.
Instead I thought to set the transparency for the text bitmap, but the bitmap which I have created are 24 bit rgb. So can we set the transparency for the 24 bit map.
Bitmap textBitmap = null;
textBitmap = new Bitmap(10, 10, PixelFormat.Format24bppRgb);
using (Graphics memoryGrahics =
Graphics.FromImage(textBitmap))
{
memoryGrahics.FillRectangle(Brushes.Black, new Rectangle(0, 0, 100, 100));
memoryGrahics.DrawString(result, f, Brushes.White, x, y);
}
//placing the text bitmap on the graphbitmap
using (Graphics g = Graphics.FromImage(GraphBitmap))
{
g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
textBitmap.MakeTransparent();
g.DrawImage(textBitmap, 0, 0);
return GraphBitmap;
}
well.. it seems like you are using 2 different Graphical objects... although 1 Graphics objects with 1 bitmap can handle multiple layouts of custom drawings, like so:
int width = 800, height = 600;
var bit = new Bitmap(width, height);
var g = Graphics.FromImage(bit);
g.SmoothingMode = SmoothingMode.AntiAlias;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
var area = new Rectangle(0, 0, width, height);
g.FillRectangle(new LinearGradientBrush(area, Color.PaleGoldenrod, Color.OrangeRed, 45), area);
g.DrawImage(Image.FromFile(#"your image"), new Point(10, 10));
g.DrawString("sample", new System.Drawing.Font("Tahoma", 56), new SolidBrush(Color.Black), new PointF(50, 50));
pictureBox1.Image = bit;
note that g.DrawImage method can be used to load other bitmaps as well