In my hidden object game, I want to mark the object with a circle image when found with the following code where AnsX1, AnsX2, AnsY1, an AnsY2 is the pixel coordinates of the object location. The circle image should be resized according to the object size marked by the pixel coordinates
imgCat.Source = writeableBmp;
WriteableBitmap wbCircle = new WriteableBitmap(AnsX2 - AnsX1, AnsY2 - AnsY1);
wbCircle = new WriteableBitmap(0, 0).FromContent("Images/circle.png");
//Just to make sure the boundary is correct so I draw the green rec around the object
writeableBmp.DrawRectangle(AnsX1, AnsY1, AnsX2, AnsY2, Colors.Green);
Rect sourceRect = new Rect(0, 0, writeableBmp.PixelWidth, writeableBmp.PixelHeight);
Rect destRect = new Rect(AnsX1, AnsY1, wbCircle.PixelWidth, wbCircle.PixelHeight);
writeableBmp.Blit(destRect, wbCircle, sourceRect);
writeableBmp.Invalidate();
My problem is instead of having one large circle I have several smaller circles filling the rectangle area at the top (see image):
EDIT 1:
Based on #Rene response I've changed the code to
imgCat.Source = writeableBmp;
//Just to make sure the boundary is correct so I draw the green rec around the object
writeableBmp.DrawRectangle(AnsX1, AnsY1, AnsX2, AnsY2, Colors.Green);
WriteableBitmap wbCircle = new WriteableBitmap(0, 0).FromContent("Images/circle.png");
wbCircle = wbCircle.Resize(AnsX2 - AnsX1, AnsY2 - AnsY1, WriteableBitmapExtensions.Interpolation.Bilinear);
Rect sourceRect = new Rect(0, 0, writeableBmp.PixelWidth, writeableBmp.PixelHeight);
Rect destRect = new Rect(AnsX1, AnsY1, AnsX2 - AnsX1, AnsY2 - AnsY1);
writeableBmp.Blit(destRect, wbCircle, sourceRect);
writeableBmp.Invalidate();
Here's the result
I will use a larger and better quality circle.png if I manage to fix this.
First I think the circle.png is too small. The Blit method does not scale up. You would need to scale it up first using the Scale function like so:
wbCircle = wbCircle.Resize(AnsX2 - AnsX1, AnsY2 - AnsY1, WriteableBitmapExtensions.Interpolation.Bilinear);
And second the sourceRect uses the size of the whole / destination bitmap and not that of the wbCircle / source bitmap. Should be:
sourceRect = new Rect(0, 0, wbCircle.PixelWidth, wbCircle.PixelHeight);
The scaling could lead to some scaling artifacts if circle is too small and the up scaling is too high. If you really only need a simple colored circle, you can also use the DrawCircle method instead:
writeableBmp.DrawCircle(AnsX1, AnsY1, AnsX2, AnsY2, Colors.Green);
Related
I need to rotate an image by a certain angle before further operations. After rotating, im left with black areas on my bitmap.
Image after rotating by 30 degrees
I've managed to find similar issue in java right here.
Is there something like that for c#?
Im using the following code, that i found earlier on stack:
Bitmap Rotate_Image(Bitmap bmp, float angle)
{
Bitmap rotatedImage = new Bitmap(bmp.Width, bmp.Height);
rotatedImage.SetResolution(bmp.HorizontalResolution, bmp.VerticalResolution);
using (Graphics g = Graphics.FromImage(rotatedImage))
{
// Set the rotation point to the center in the matrix
g.TranslateTransform(bmp.Width / 2, bmp.Height / 2);
// Rotate
g.RotateTransform(angle);
// Restore rotation point in the matrix
g.TranslateTransform(-bmp.Width / 2, -bmp.Height / 2);
// Draw the image on the bitmap
g.DrawImage(bmp, new Point(0, 0));
}
return rotatedImage;
}
Since your output is *.png I assume you want to use a transparent background. Just call g.Clear(Color.FromArgb(0, default)); before applying TranslateTransform. Or just set any other background color if you like.
You also can set g.SmoothingMode = SmoothingMode.AntiAlias; to smoothen the sides of the rotated image.
I am trying to get the handle on some C# functions. Is there any simpler way to draw an image to the screen in Windows Forms using pixels as the measurement ? I just want that accuracy, as I am going to eventually run through an array of a World Level and put grass and walls etc on the screen based on the array.
Image grass = Bitmap.FromFile("grass.png");
// Create parallelogram for drawing image.
Point ulCorner = new Point(0, 0);
Point urCorner = new Point(100, 0);
Point llCorner = new Point(0, 100);
Point[] destPara = { ulCorner, urCorner, llCorner };
// Create rectangle for source image.
Rectangle srcRect = new Rectangle(0, 0, 100, 100);
GraphicsUnit units = GraphicsUnit.Pixel;
// Draw image to screen.
GFX.DrawImage(grass, destPara, srcRect, units);
I know I can do the following:
GFX.DrawImage(grass, new point(50,50) );
But the problem is this is now not using pixels as the measurement so I cannot position it correctly on the screen.
Call DrawImage but specifying the width and height you want, otherwise GDI+ will take into account the DPI of the device and scale it.
graphics.DrawImage(grass, top, left, grass.Width, grass.Height);
Beware DrawImageUnscaled(), contrary to what it suggests, will actually continue to scale.
Well Graphics.DrawImageUnscaled Method (Image, Int32, Int32) doesn't do anything different than DrawImage (Image, Int32, Int32) - Tell me more...
I am trying to draw 2 rectangles 1 in green channel 2nd in red channel of a bitmap.
This is the code:
Bitmap bitmap_guess = new Bitmap(C_PALETTE_X_PIXEL_MAX, C_PALETTE_Y_PIXEL_MAX, PixelFormat.Format24bppRgb);
Graphics graphics = Graphics.FromImage(bitmap_guess);
Rectangle box_rect = new Rectangle(0, 0, C_BOX_PIXELS_WIDTH, C_BOX_PIXELS_HEIGHT);
matrix = new Matrix();
matrix.RotateAt(thc, new System.Drawing.PointF(xc, yc), MatrixOrder.Prepend);
graphics.Transform = matrix;
graphics.FillRectangle(new SolidBrush(Color.Green), xc, yc, box_rect.Width, box_rect.Height);
matrix = new Matrix();
matrix.RotateAt(th, new System.Drawing.PointF(x, y), MatrixOrder.Prepend);
graphics.Transform = matrix;
graphics.FillRectangle(new SolidBrush(Color.Red), x, y, box_rect.Width, box_rect.Height);
The problem is that when I draw the 2nd rectangle in red color it overwrites the 1st rectangles overlapping pixels to 0's. I'd want the rectangles to to change color when they overlap instead of plainly overwriting the previous pixel values. IE - to draw in a single channel instead of all 3.
I'm specifically looking for a Graphics operation for this.
Kind regards,
Laov
This might help you Merging two images in C#/.NET
You then could draw each rectangle into its own image and merge the results...
I'd like to take a bitmap with an ARGB 32 pixel format and clip it so that the contents within its inscribed ellipse remain, and anything outside the ellipse turns into ARGB(0,0,0,0).
I could do it programmatically using GetPixel and SetPixel and some trigonometry to figure out which pixel is out of bounds - but I suspect there's a better, more built-in way to do it.
Any ideas?
Thanks to Alessandro D'Andria for pointing out the region part - I've figured out the rest:
public Bitmap Rasterize()
{
Bitmap ringBmp = new Bitmap(width: _size.Width, height: _size.Height, format: PixelFormat.Format32bppArgb);
//Create an appropriate region from the inscribed ellipse
Drawing2D.GraphicsPath graphicsEllipsePath = new Drawing2D.GraphicsPath();
graphicsEllipsePath.AddEllipse(0, 0, _size.Width, _size.Height);
Region ellipseRegion = new Region(graphicsEllipsePath);
//Create a graphics object from our new bitmap
Graphics gfx = Graphics.FromImage(ringBmp);
//Draw a resized version of our image to our new bitmap while using the highest quality interpolation and within the defined ellipse region
gfx.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor;
gfx.SmoothingMode = Drawing2D.SmoothingMode.HighQuality;
gfx.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighQuality;
gfx.PageUnit = GraphicsUnit.Pixel;
gfx.Clear(Color.Transparent);
gfx.Clip = ellipseRegion;
gfx.DrawImage(image: _image, rect: new Rectangle(0, 0, _size.Width, _size.Height));
//Dispose our graphics
gfx.Dispose();
//return the resultant bitmap
return ringBmp;
}
Apparently it is extremely important to set PixelOffsetMode to HighQuality, because otherwise the DrawImage method would crop parts of the resulting image.
On the left is the polygon I drew using my paint-like program. On the right is the polygon drawn by System.Drawing.Bitmap/Graphics:
The code to draw it is as follows:
protected static Bitmap CropImage(Bitmap src, Vector2[] rect)
{
var result = new Bitmap(src.Width, src.Height);
using (Graphics g = Graphics.FromImage(result))
{
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
var pen = new Pen(Color.White);
g.DrawImage(src, new Point(0,0));
var poly = rect.Select(p => p.ToPointF()).ToArray();
g.DrawPolygon(pen, poly);
}
return result;
}
poly is:
{System.Drawing.PointF[4]}
[0]: {X = 57.4230042 Y = 57.4229736}
[1]: {X = 147.058868 Y = 56.0224}
[2]: {X = 148.43277 Y = 143.951767}
[3]: {X = 58.7969131 Y = 145.352341}
Each of the black squares in the image is 50x50. If you look at poly, all the coordinates are exactly as you'd expect: poly[0] is a little above 50,50 which corresponds to inside the black square labelled "6" (as shown in left image).
So how is Graphics getting confused and putting it in the wrong spot? It looks like it's scaling the whole rect down.
You are confused. The rectangle is correct, but the background image is scaled up. Note that the 6 and the black square are a lot bigger, but the rectangle is the exact same size.
Note that the Graphics.DrawImage method scales the source image to match the destination resolution.
This method draws an image using its physical size, so the image will have its correct size in inches regardless of the resolution (dots per inch) of the display device. For example, suppose an image has a pixel width of 216 and a horizontal resolution of 72 dots per inch. If you call this method to draw that image on a device that has a resolution of 96 dots per inch, the pixel width of the rendered image will be (216/72)*96 = 288.
You should use the overload that accepts a Rectangle instead:
g.DrawImage(src, new Rectangle(0, 0, src.Width, src.Height));