Hey.
I havea 480 x 800 image and would like to place this on my tilemap. I'm trying to split the image into into a grid (6 x 10) and assign each tile that specific portion of the image. Essentially, the tilemap will look like one big image since each tile has the relevant part of the image attached to it. What's the best way of doing this?
I've tried going through each tile and drawing it to a WriteableBitmap, but all the images are the same.
WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src= new Rect(x*Width,y*Height, 80, 80);
Rect dest= new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src);
tile.SetImage(wb);
(x and y) are the just the indexes used when iterating through the tilemap, 80 is the tile height and width and mainWb is the big image I want to split. Thanks for any help.
edit: Full loop code:
var mainImage = Application.GetResourceStream(new Uri("MainImage.jpg", UriKind.Relative)).Stream;
WriteableBitmap mainWb = new WriteableBitmap(480, 800);
mainWb.SetSource(mainImage);
for (int x = 0; x < 6; x++)
{
for (int y = 0; y < 12; y++)
{
Tile tile = new Tile();
WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src = new Rect(x*Width,y*Height, 80, 80);
Rect dest = new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src);
tile.SetImage(wb);
Canvas.SetLeft(tile, x * WIDTH);
Canvas.SetTop(tile, y * HEIGHT);
LayoutRoot.Children.Add(tile);
ls.Add(tile);
}
}
The Tile class is a simple 80x80 canvas with an Image control called img. The SetImage method above is this:
public void SetImage(WriteableBitmap wb)
{
img.Source = wb;
}
you can do it with a nice trick - just crop the image each time using a canvas, and move the image so each time another piece is showing:
<Canvas Width="80" Height="80">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,80,80" />
</Canvas.Clip>
<Image Source="your_image.png"
Canvas.Left="0" Canvas.Top="0" />
<!-- or -80, -160, -240 etc.. -->
</Canvas>
Related
I'm triying to cover an image with another in order to provide a watermark but it has to cover the entire source image. The problem is that the watermark provided is of 600x600 and the source image can have any size and aspect ratio. So far it does not cover the source image entirely.
I solved it like this (in a very straightforward way).
private void button1_Click(object sender, EventArgs e)
{
var image = new Bitmap( this.pictureBox1.Image.Width, this.pictureBox1.Image.Height);
var rect = new Rectangle(0, 0, this.pictureBox1.Image.Width, this.pictureBox1.Image.Height);
Graphics graphics = Graphics.FromImage(image);
graphics.DrawImage(this.pictureBox1.Image, 0, 0);
var waterMarkImage = new Bitmap(this.pictureBox2.Image.Width, this.pictureBox2.Image.Height);
for (int y = 0; y < waterMarkImage.Height; y++)
{
for (int x = 0; x < waterMarkImage.Width; x++)
{
var color = (this.pictureBox2.Image as Bitmap).GetPixel(x, y);
color = Color.FromArgb(50, color.R, color.G, color.B);
waterMarkImage.SetPixel(x, y, color);
}
}
graphics.DrawImage(waterMarkImage, rect);
this.pictureBox3.Image = image;
}
In pictureBox1 I loaded main image. In pictureBox2 I loaded "water mark". In the event handler I created resulting image (first main image then the second) and loaded it into pictureBox3. To get water mark affect I reduced alpha component of color (I set it to 50).
I have a problem with image cropping. When I try to crop image with rectangle the cropping area is set to some strange value.
Here is xaml code:
<Grid Name="GridImage">
<Image Name="LoadedImage" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality">
</Image>
<Canvas x:Name="ImageCanvas" ClipToBounds="True">
<Rectangle x:Name="SelectionRectangle" Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
</Canvas>
</Grid>
and here how I crop image:
var imagePosition = LoadedImage.TransformToAncestor(GridImage).Transform(new Point(0, 0));
Rect rect1 = new Rect(Math.Max(Canvas.GetLeft(SelectionRectangle) - imagePosition.X, 0), Math.Max(Canvas.GetTop(SelectionRectangle) - imagePosition.Y, 0), SelectionRectangle.Width, SelectionRectangle.Height);
var ratioX = LoadedImage.Source.Width / LoadedImage.ActualWidth;
var ratioY = LoadedImage.Source.Height / LoadedImage.ActualHeight;
Int32Rect rcFrom = new Int32Rect
{
X = (int)(rect1.X * ratioX),
Y = (int)(rect1.Y * ratioY),
Width = (int)(rect1.Width * ratioX),
Height = (int)(rect1.Height * ratioY)
};
try
{
BitmapSource bs = new CroppedBitmap((BitmapSource)LoadedImage.Source, rcFrom);
LoadedImage.Source = bs;
SetImageStretch(LoadedImage);
SetElementVisibility(Visibility.Hidden, Visibility.Visible, SelectionRectangle);
}
private void SetImageStretch(Image image)
{
if (image.Source.Width > image.ActualWidth || image.Source.Height > image.ActualHeight)
image.Stretch = Stretch.Uniform;
else image.Stretch = Stretch.None;
}
Does anybody know how to fix that?
Here how it looks before cropping:
How it looks after cropping:
Most likely the problem is with image resolution, e.g. 300 dpi, versus screen resolution (most likely 96 dpi). Have you checked image's PixelWidth and PixelHeight?
I have this constructor that takes in an input of an array of Color objects and some misc strings (like file location and size of list), and stores this heatmap into a bitmap instance called _image_. Everything works out fine, but my main issue is I have no way to render text onto this heatmap. I would like to overlay title text and x and y-axis labels onto this bitmap.
public HeatMap(IEnumerable<Color> colors, int width, int height, string file, int U, int V) {
if (colors == null)
throw new ArgumentNullException("colors");
if (width <= 0)
throw new ArgumentException("width must be at least 1");
if (height <= 0)
throw new ArgumentException("height must be at least 1");
_width = width;
_height = height;
_file = file;
_image = new Bitmap(U, V, PixelFormat.Format32bppArgb);
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.White);
graphics.Dispose();
int x = 0;
int y = 0;
foreach (Color color in colors) {
_image.SetPixel(x, y, color); // This can be speeded up by using GH_MemoryBitmap if you want.
y++;
if (y >= V) {
y = 0;
x++;
}
if (x >= U)
break;
}
}
Below, I also have a method that resizes the image (without too much distortion), and I figured I might as well make use of this since I have a graphics object I can use, like so:
private Bitmap ResizeBitmap(Bitmap sourceBMP, int width, int height) {
Bitmap result = new Bitmap(width, height);
using (Graphics g = Graphics.FromImage(result)) {
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.DrawImage(sourceBMP, 0, 0, width, height);
g.DrawString("A heatmap.", SystemFonts.DefaultFont, Brushes.Black, 10, 10);
}
return result;
}
Using the above, I was able to overlay text over it, as a starting point. My question is, how do I add a white boarder over the above image (so my text doesn't overlap my graph), and then overlay x and y-axis text onto it?
I guess my specific question really is - how do I render text onto, say, every four columns of my heatmap? In most instances, there are 100 x-axis objects, and like 24 y-axis objects. The y-axis would have the time of the day, while the x-axis has the day of the year. My familiarity with using graphics in C# is very low, so any pointers is very appreciated.
You've to use the DrawString before the graphics.Dispose() and after the Clear().
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.WhiteSmoke);
graphics.DrawString("your text", SystemFonts.DefaultFont, Brushes.Black, new PointF(0, 0));
graphics.Dispose();
Where the PointF(0, 0) represents the up-left corner of your text placeholder, you've to calculate the text position based on the positions of your heatmap.
UPDATE (alignment)
You can align your text in relation with a virtual rectangle, doing something like:
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.WhiteSmoke);
StringFormat stringFormat = new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center };
graphics.DrawString("your text", SystemFonts.DefaultFont, Brushes.Black, new RectangleF(0, 0, 100, 100), stringFormat);
graphics.Dispose();
In this case I've created a virtual box of 100x100 positioned on the top-left corner, and the text is h/v centered relatively to this box.
How can I manipulate images to add a semi-transparent 1x1 checked overlay like the second image in C#?
I was able to modify an answer I posted a while ago and create the overlay in code. After the overlay image is created, I use a TextureBrush to fill the area of the original image. The settings in the code below created the following image; you can change the size and colors to suit your needs.
// set the light and dark overlay colors
Color c1 = Color.FromArgb(80, Color.Silver);
Color c2 = Color.FromArgb(80, Color.DarkGray);
// set up the tile size - this will be 8x8 pixels, with each light/dark square being 4x4 pixels
int length = 8;
int halfLength = length / 2;
using (Bitmap overlay = new Bitmap(length, length, PixelFormat.Format32bppArgb))
{
// draw the overlay - this will be a 2 x 2 grid of squares,
// alternating between colors c1 and c2
for (int x = 0; x < length; x++)
{
for (int y = 0; y < length; y++)
{
if ((x < halfLength && y < halfLength) || (x >= halfLength && y >= halfLength))
overlay.SetPixel(x, y, c1);
else
overlay.SetPixel(x, y, c2);
}
}
// open the source image
using (Image image = Image.FromFile(#"C:\Users\Public\Pictures\Sample Pictures\homers_brain.jpg"))
using (Graphics graphics = Graphics.FromImage(image))
{
// create a brush from the overlay image, draw over the source image and save to a new image
using (Brush overlayBrush = new TextureBrush(overlay))
{
graphics.FillRectangle(overlayBrush, new Rectangle(new Point(0, 0), image.Size));
image.Save(#"C:\Users\Public\Pictures\Sample Pictures\homers_brain_overlay.jpg");
}
}
}
Load your original image in to a system.Drawing.Image, then create a graphics object from it. Load your 2nd image of the checker pattern you want to draw, and use the graphics object you created to repeatedly draw the checker image over the original image.
Untested Example
Image Original;
Image Overlay;
Original = new Bitmap(100, 100, System.Drawing.Imaging.PixelFormat.Format32bppArgb); //Load your real image here.
Overlay = new Bitmap(2, 2 ,System.Drawing.Imaging.PixelFormat.Format32bppArgb);//Load your 2x2 (or whatever size you want) overlay image here.
Graphics gr = Graphics.FromImage(Original);
for (int y = 0; y < Original.Height + Overlay.Height; y = y + Overlay.Height)
{
for (int x = 0; x < Original.Width + OverlayWidth; x = x + Overlay.Width)
{
gr.DrawImage(Overlay, x, y);
}
}
gr.Dispose();
After the code executes, Original will now contain the Original image with the overlay applied to it.
as stated in subject, i have an image:
private Image testing;
testing = new Bitmap(#"sampleimg.jpg");
I would like to split it into 3 x 3 matrix meaning 9 images in total and save it.Any tips or tricks to do this simple? I'm using visual studios 2008 and working on smart devices. Tried some ways but i can't get it. This is what i tried:
int x = 0;
int y = 0;
int width = 3;
int height = 3;
int count = testing.Width / width;
Bitmap bmp = new Bitmap(width, height);
Graphics g = Graphics.FromImage(bmp);
for (int i = 0; i < count; i++)
{
g.Clear(Color.Transparent);
g.DrawImage(testing, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
bmp.Save(Path.ChangeExtension(#"C\AndrewPictures\", String.Format(".{0}.bmp",i)));
x += width;
}
Depending on the .NET version, you could do one of the following to crop:
.NET 2.0
private static Image cropImage(Image img, Rectangle cropArea)
{
Bitmap bmpImage = new Bitmap(img);
Bitmap bmpCrop = bmpImage.Clone(cropArea,
bmpImage.PixelFormat);
return (Image)(bmpCrop);
}
Or .NET 3.5+
// Create an Image element.
Image croppedImage = new Image();
croppedImage.Width = 200;
croppedImage.Margin = new Thickness(5);
// Create a CroppedBitmap based off of a xaml defined resource.
CroppedBitmap cb = new CroppedBitmap(
(BitmapSource)this.Resources["masterImage"],
new Int32Rect(30, 20, 105, 50)); //select region rect
croppedImage.Source = cb; //set image source to cropped
As you can see, it's a bit more simple than what you're doing. The first example clones the current image and takes a subset of it; the second example uses CroppedBitmap, which supports taking a section of the image right from the constructor.
The splitting part is simple maths, just splitting the image into 9 sets of coordinates and passing them into the constructor.