We Keep Coding

C# Resize Image with No Interpolation

I know this question has been asked frequently, but none of the typical answers have given me the result I need. I am attempting to zoom a grayscale bitmap much like Paint.exe. I want no interpolation so the original, individual pixels can be observed. I have tried the oft-suggested NearestNeighbor approach which gets close, but not exactly what I want.
This is what I want:
This is what I get:
This is the code I am using to zoom and redraw the image.
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.PixelOffsetMode = PixelOffsetMode.Half;
e.Graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
e.Graphics.SmoothingMode = SmoothingMode.None;
Matrix m = new Matrix();
m.Scale(mScale, mScale, MatrixOrder.Append);
e.Graphics.Transform = m;
e.Graphics.TranslateTransform(this.AutoScrollPosition.X / mScale,this.AutoScrollPosition.Y / mScale);
if (mImage != null)
e.Graphics.DrawImage(mImage, 0, 0);
base.OnPaint(e);
}
The code does have an affect on the image as the zoom works and changing the InterpolationMode does change the image. However, no combination of settings gets the result I need.
Any ideas?

I'm trying to display 16-bit images with C#. I came across the same trouble that the colors in the totally same pixel is not the same. Finally I solved this trouble with the sample code below:
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
e.Graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
e.Graphics.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighSpeed;
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None;
e.Graphics.Clear(Color.Black); //Clear the background with the black color
if(m_bmp != null) //if m_bmp == null, then do nothing.
{
//To calculate the proper display area's width and height that fit the window.
if (this.Width / (double)this.Height > m_bmp.Width / (double)m_bmp.Height)
{
m_draw_height = (int)(this.Height * m_roomRatio);
m_draw_width = (int)(m_bmp.Width / (double)m_bmp.Height * m_draw_height);
}
else
{
m_draw_width = (int)(this.Width * m_roomRatio);
m_draw_height = (int)(m_bmp.Height / (double)m_bmp.Width * m_draw_width);
}
//To calculate the starting point.
m_draw_x = (int)((this.Width - m_draw_width) / 2.0 + m_offsetX / 2.0);
m_draw_y = (int)((this.Height - m_draw_height) / 2.0 + m_offsetY / 2.0);
e.Graphics.DrawImage(m_bmp, m_draw_x, m_draw_y, m_draw_width, m_draw_height);
//draw some useful information
string window_info = "m_draw_x" + m_draw_x.ToString() + "m_draw_width" + m_draw_width.ToString();
e.Graphics.DrawString(window_info, this.Font, new SolidBrush(Color.Yellow), 0, 20);
}
BTW, why don't you try to use double buffer to increase the performance of drawing images?
Here is the effect:
Hope that will help.

Resize a box with the mouse while maintaining the aspect ratio?

I'm trying to create a resizable image overlay (for cropping purposes). It seems pretty easy to resize the overlay if I ignore the aspect ratio, but I can't figure out how to perform a constrained resize that respects the AR. I figure that I obviously can't obey the overlay's "grip" positions (or even borders) unless I force the mouse to follow it, but that seems unnatural, so I'll just have to rely on the mouse gesture (which I don't mind doing).
I can also easily resize the overlay and then force it into the proper dimensions afterwards (like every other question about this topic on this site is about), but it's not very intuitive when using a mouse.
This is sort of what I'm going for:
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
I've written an application like this before but it was browser-based so I used a javascript library. This is a desktop application and I haven't found a suitable library for this.
I've left a lot of details out of this code snippet and simplified some conditions with booleans.
private void pbImage_Paint(object sender, PaintEventArgs e)
{
//Overlay
e.Graphics.FillRectangle(brushRect, overlayRect);
// Grips
e.Graphics.FillRectangle(gripRect, leftTopGrip);
e.Graphics.FillRectangle(gripRect, rightTopGrip);
e.Graphics.FillRectangle(gripRect, leftBottomGrip);
e.Graphics.FillRectangle(gripRect, rightBottomGrip);
AdjustGrips();
base.OnPaint(e);
}
public void AdjustGrips()
{
// The next section only causes the grips to partly obey
// the AR - the rest of the overlay ignores it
if (overlayRect.Height * arWidth <= overlayRect.Width)
overlayRect.Width = overlayRect.Height * arWidth;
else if (overlayRect.Width * arHeight <= overlayRect.Height)
overlayRect.Height = overlayRect.Width * arHeight;
leftTopGrip.X = overlayRect.Left;
leftTopGrip.Y = overlayRect.Top;
rightTopGrip.X = overlayRect.Right - rightTopGrip.Width;
rightTopGrip.Y = overlayRect.Top;
leftBottomGrip.Y = overlayRect.Bottom - leftBottomGrip.Height;
leftBottomGrip.X = overlayRect.Left;
rightBottomGrip.X = overlayRect.Right - rightBottomGrip.Width;
rightBottomGrip.Y = overlayRect.Bottom - rightBottomGrip.Height;
}
private void pbImage_MouseMove(object sender, MouseEventArgs e)
{
Point pt = new Point(e.X, e.Y);
// Details elided
if (e.Button == MouseButtons.Left && mouseinGrip)
{
if (bottomRightIsGripped)
{
newOverlayRect.X = overlayRect.X;
newOverlayRect.Y = overlayRect.Y;
newOverlayRect.Width = pt.X - newOverlayRect.Left;
newOverlayRect.Height = pt.Y - newOverlayRect.Top;
if (newOverlayRect.X > newOverlayRect.Right)
{
newOverlayRect.Offset(-width, 0);
if (newOverlayRect.X < 0)
newOverlayRect.X = 0;
}
if (newOverlayRect.Y > newOverlayRect.Bottom)
{
newOverlayRect.Offset(0, -height);
if (newOverlayRect.Y < 0)
newOverlayRect.Y = 0;
}
pbImage.Invalidate();
oldOverlayRect = overlayRect = newOverlayRect;
Cursor = Cursors.SizeNWSE;
}
// Code for other grips elided
}
AdjustGrips();
pbImage.Update();
base.OnMouseMove(e);
}
// Mouse up and down elided

You have complete control over the new size for the overlay as it drags.
The example link that you've given, is simply selecting a starting point based on the click down, then selecting Max(Abs(pt.x - start.x), Abs(pt.y - start.y)), and basing the crop square off of that.
To use a non square ratio, normalize the distances first.
// given known data
//
// Point start;
// The starting location of the mouse down for the drag,
// or the top left / bottom right of the crop based on if the mouse is
// left/above the starting point
//
// Size ratio;
// The ratio of the result crop
//
// pt = (20)x(-20)
// start = (0),(0)
// ratio = (1)x(2)
var dist = new Point(pt.X - start.X, pt.Y - start.Y);
// "normalize" the vector from the ratio
// normalized vector is the distances with respect to the ratio
// ratio is (1)x(2). A (20)x(-20) is normalized as (20),(-10)
var normalized = new Point(dist.X / ratio.Width, dist.Y / ratio.Height);
// In our (20),(-10) example, we choose the ratio's height 20 as the larger normal.
// we will base our new size on the height
var largestNormal = (Math.Abs(normalized.X) > Math.Abs(normalized.Y)
? Math.Abs(normalized.X) : Math.Abs(normalized.Y);
// The calcedX will be 20, calcedY will be 40
var calcedOffset = (largestNormal * ratio.Width, largestNormal * ratio.Height);
// reflect the calculation back to the correct quarter
// final size is (20)x(-40)
if (distX < 0) calcedOffset.X *= -1;
if (distY < 0) calcedOffset.Y *= -1;
var newPt = new Point(start.X + calcedOffset.X, start.Y + calcedOffset.Y);
Notice that one of the lengths can grow greater than the mouse location, but it will never be less. This will have the effect of the mouse traveling along the edge of the new crop box, and the box maintaining ratio.

I've figured out what was causing the original problems in my code. Unlike a static image resize, the aspect ratio code depends on which grip you're "holding", so putting it in a common location for all cases (eg. when the grip positions are set) will not work. You can easily calculate the size of the what the rect should be on the next update, but the position should be set depending on which grip is being held.
If, for example, you're resizing by holding the top left grip, then the bottom and right sides of the cropping rectangle should remain stationary. If you leave the code the same, then the rectangle resizes correctly, but it moves around the canvas and/or the grips go out of sync with the corners of the rect. There is probably a better way to do this but here's some crude code that works. I've only included code for the bottom right and top left grips to illustrate the differences. Extraneous things like setting the mouse pointer and error checking omitted.
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Point mousePosition = new Point(e.X, e.Y);
if (e.Button == MouseButtons.Left)
{
// This resizeMode, moveMode and other booleans
// are set in the MouseUp event
if (resizeBottomLeft)
{
// Top and Right should remain static!
newCropRect.X = mousePosition.X;
newCropRect.Y = currentCropRect.Y;
newCropRect.Width = currentCropRect.Right - mousePosition.X;
newCropRect.Height = mousePosition.Y - newCropRect.Top;
if (newCropRect.X > newCropRect.Right)
{
newCropRect.Offset(cropBoxWidth, 0);
if (newCropRect.Right > ClientRectangle.Width)
newCropRect.Width = ClientRectangle.Width - newCropRect.X;
}
if (newCropRect.Y > newCropRect.Bottom)
{
newCropRect.Offset(0, -cropBoxHeight);
if (newCropRect.Y < 0)
newCropRect.Y = 0;
}
// Aspect Ratio + Positioning
if (newCropRect.Width > newCropRect.Height)
{
newCropRect.Height = (int)(newCropRect.Width / ASPECT_RATIO);
}
else
{
int newWidth = (int)(newCropRect.Height * ASPECT_RATIO);
newCropRect.X = newCropRect.Right - newWidth;
newCropRect.Width = newWidth;
}
}
else if (resizeTopRight)
{
// Bottom and Left should remain static!
newCropRect.X = oldCropRect.X;
newCropRect.Y = mousePosition.Y;
newCropRect.Width = mousePosition.X - newCropRect.Left;
newCropRect.Height = oldCropRect.Bottom - mousePosition.Y;
if (newCropRect.X > newCropRect.Right)
{
newCropRect.Offset(-cropBoxWidth, 0);
if (newCropRect.X < 0)
newCropRect.X = 0;
}
if (newCropRect.Y > newCropRect.Bottom)
{
newCropRect.Offset(0, cropBoxHeight);
if (newCropRect.Bottom > ClientRectangle.Height)
newCropRect.Y = ClientRectangle.Height - newCropRect.Height;
}
// Aspect Ratio + Positioning
if (newCropRect.Width > newCropRect.Height)
{
int newHeight = (int)(newCropRect.Width / ASPECT_RATIO);
newCropRect.Y = newCropRect.Bottom - newHeight;
newCropRect.Height = newHeight;
}
else
{
int newWidth = (int)(newCropRect.Height * ASPECT_RATIO);
newCropRect.Width = newWidth;
}
}
else if (moveMode) //Moving the rectangle
{
newMousePosition = mousePosition;
int dx = newMousePosition.X - oldMousePosition.X;
int dy = newMousePosition.Y - oldMousePosition.Y;
currentCropRect.Offset(dx, dy);
newCropRect = currentCropRect;
oldMousePosition = newMousePosition;
}
if (resizeMode || moveMode)
{
oldCropRect = currentCropRect = newCropRect;
// Set the new position of the grips
AdjustGrips();
pictureBox1.Invalidate();
pictureBox1.Update();
}
}
}

Looking for sample code to rotate by touch WinRT xaml round button or image like a stereo radio's button

I'm looking for sample code to rotate by touch or mouse WinRT xaml round button or image like a stereo radio's button. The idea to is be able to touch the control to rotate to the right of left in a infinite way. The delta value is used to increase or decrease another object's value. The rotation angle is not important. Just the action of turning the control to the right or left is.
Any tips for the good way to achieve this would be appreciated ?
Part of the code here:
private RotateTransform rotateTransform;
void ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
e.Handled = true;
var image = sender as Image;
var container = image.Parent as UIElement;
var localCenter = new Point(image.ActualWidth / 2, image.ActualHeight / 2);
var pivot = new ManipulationPivot(localCenter, 20);
e.Pivot = pivot;
rotateTransform.CenterX = image.ActualWidth / 2;
rotateTransform.CenterY = image.ActualHeight / 2;
e.Container = container;
}
void ImageManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
e.Handled = true;
var image = sender as Image;
double newAngle;
var valueDrawline = 1;
if (e.Delta.Rotation < 0)
{
valueDrawline = -1;
newAngle = rotateTransform.Angle - (1 + e.Delta.Rotation);
}
else
{
valueDrawline = 1;
newAngle = rotateTransform.Angle + (1 + e.Delta.Rotation);
}
rotateTransform.Angle = newAngle;
image.RenderTransform = rotateTransform;
}
The "real" problem is coming from the direction which is not constant. Ex: when I turn the control with the mouse or finger doing rounds from left to right, the value is supposed to be incremented by +1. This is not working well with the current code as the value is mostly incremented by +1 but also with -1 even if I still turning in the direction.
To be more clear, let's imagine I want to draw an horizontal line with my control. I need to turn it in right to draw to right and the inverse to draw the the left. With this code, it's going to the correct direction but with a lot of steps back along the path of the line...
Txs in advance

Keeping a PictureBox centered inside a container

I am designing a simple picture viewer with ability to do some basic image processing. At the moment I have the problem of keeping the PictureBox centered inside a TabPage all the time as well as keeping the picturebox width and size same as the picture its showing. So far I had no success.
I have the following code that I call in form constructor to position it in center. it works the first time to center the picturebox:
private void SetPictureBoxOriginalSizeAndLocation(bool makeImageNull = false, DockStyle dockStyle = DockStyle.None)
{
if (makeImageNull) picBoxView.Image = null;
picBoxView.Dock = dockStyle;
var xPoint = tabImageView.Location.X + ((splitContainer.Panel2.Width / 2) / 2);
var yPoint = tabImageView.Location.Y;
var width = tabImageView.Width / 2;
var height = (tabImageView.Height / 2) - toolStripImageView.Height;
if (picBoxView.Image == null) return;
//Resize image according to width
picBoxView.Image = ImageMethods.ResizeImage(picBoxView.Image.Tag.ToString(), width, height, false);
picBoxView.Location = new Point(xPoint, yPoint);
picBoxView.Width = width;
picBoxView.Height = height;
}
But it does not resize the picturebox to its image (you can see the black part that is back color for the picturebox control):
The problem is getting worse as soon as I resize the form, the picturebox position will goes to top:
I call the code above in form's resize event as well, no idea why it works when application starts. Would be nice if someone can tell me what properties I should take care of to achieve a nicely centered picturebox which always is as big as its image.

It's pretty easy if you just set the Anchor style to none:
picBoxView = new PictureBox();
picBoxView.SizeMode = PictureBoxSizeMode.AutoSize;
picBoxView.Anchor = AnchorStyles.None;
tabImageView.Controls.Add(picBoxView);
CenterPictureBox(picBoxView, myImage);
Then just center the PictureBox initially whenever you change the image of the PictureBox:
private void CenterPictureBox(PictureBox picBox, Bitmap picImage) {
picBox.Image = picImage;
picBox.Location = new Point((picBox.Parent.ClientSize.Width / 2) - (picImage.Width / 2),
(picBox.Parent.ClientSize.Height / 2) - (picImage.Height / 2));
picBox.Refresh();
}
Having the Anchor = None will center the PictureBox control for you whenever the parent container gets resized because it "isn't" anchored to the default Left and Top locations.

Givien a Form with TabControl, which has Dock set to Fill, below will keep your PictureBox in the centre. It also sets PictureBox size to Bitmap size:
public partial class Form1 : Form
{
Bitmap b = new Bitmap(320, 200);
public Form1()
{
InitializeComponent();
CenterTheBox();
}
private void Form1_Resize(object sender, EventArgs e)
{
CenterTheBox();
}
void CenterTheBox()
{
pictureBox1.Size = b.Size;
var left = (tabPage1.ClientRectangle.Width - pictureBox1.ClientRectangle.Width) / 2;
var top = (tabPage1.ClientRectangle.Height - pictureBox1.ClientRectangle.Height) / 2;
pictureBox1.Location = new Point(tabPage1.ClientRectangle.Location.X + left, tabPage1.ClientRectangle.Location.Y + top);
}
}

I believe your problem lies here
var xPoint = tabImageView.Location.X + ((splitContainer.Panel2.Width / 2) / 2);
var yPoint = tabImageView.Location.Y;
var width = tabImageView.Width / 2;
var height = (tabImageView.Height / 2) - toolStripImageView.Height;
ypoint is alwways set to tabImageView Y, althought it should be set to
tabImageView.Location.Y + (tabImageView.Size.Height - picBoxView.Size.Height)/2
should be almost the same with xPoint
tabImageView.Location.X + (tabImageView.Size.Width - picBoxView.Size.Width)/2
and
width = picBoxView.Image.Width;
height = picBoxView.Image.Height;

How To Re-size An Image C#.net Windows Forms

I was wondering, once i load an image into a windows form, is there a way for me to allow the user to drag the corners of that image and re-size it?
Currently, i know about the PictureBox.Scale method (but this is deprecated). I also know about PictureBox.Image.Size. Would this mean that each time they re-size i would need to use PictureBox.Image.Size? Also, how do i allow them to grab the image for re-sizing? I guess i'm thinking about paint and how it allows the user to select the image and then re-size it by dragging the corners...
I'm not looking for a full solution - just some pointers in the right direction (Pseudo code or general description to help my thought process would be fine). I'm not quite sure how to approach this problem.
Here is my code so far:
using (OpenFileDialog ofd = new OpenFileDialog())
{
ofd.Title = "Load Image";
if (ofd.ShowDialog() == DialogResult.OK)
{
PictureBox pictureBox = new PictureBox();
pictureBox.Image = new Bitmap(ofd.FileName);
pictureBox.SizeMode = PictureBoxSizeMode.StretchImage;
pictureBox.Size = pictureBox.Image.Size;
panelArea.Controls.Add(pictureBox);
}
}

There is already a control in Winforms that can display a bitmap and supports resizing with the mouse: a form. You just need a little bit of surgery to turn it into a control:
using (OpenFileDialog ofd = new OpenFileDialog()) {
ofd.Title = "Load Image";
if (ofd.ShowDialog() == DialogResult.OK) {
var box = new Form();
box.TopLevel = box.ControlBox = false;
box.Visible = true;
box.BackgroundImage = new Bitmap(ofd.FileName);
panelArea.Controls.Add(box);
box.Size = box.BackgroundImage.Size;
}
}

Edit: In your case, Hans Passant's method is best. I'll keep my answer up in case you eventually have more complex editing requirements (e.g., dragging multiple shapes)
The interesting part is getting the mouse interaction to work. For now, let's assume you only want to resize by dragging the lower-right hand corner of the image. I would do something like this:
Create a UserControl named, e.g, ImageCanvas. Inside this control, do the following:
Add a field to keep track of the size/location of the image, perhaps Rectangle imageRect
Override the OnPaint method to display your image:
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.DrawImage(image, imageRect);
}
Add a field to keep track of when the user is resizing the image, say bool isDraggingSize
Override OnMouseDown, and OnMouseUp. Set or clear isDraggingSize when the mouse button goes down or up, respectively.
Override OnMouseMove to do the following:
Set the cursor: If isDraggingSize or the mouse pointer is close to the lower right corner of the image, set Cursor = Cursors.SizeNWSE; otherwise, set Cursor = Cursors.Default.
If isDraggingSize, change the imageSize field based on the mouse location. Call Invalidate(), or Refresh() if necessary, to update the display.
Play around with it, and fix all the little details -- like deciding what happens when the user tries to resize the image larger than the control, and how to get rid of flickering.

public Bitmap _currentBitmap;
public void Resize(int newWidth, int newHeight)
{
if (newWidth != 0 && newHeight != 0)
{
Bitmap temp = (Bitmap)_currentBitmap;
Bitmap bmap = new Bitmap(newWidth, newHeight, temp.PixelFormat);
double nWidthFactor = (double)temp.Width / (double)newWidth;
double nHeightFactor = (double)temp.Height / (double)newHeight;
double fx, fy, nx, ny;
int cx, cy, fr_x, fr_y;
Color color1 = new Color();
Color color2 = new Color();
Color color3 = new Color();
Color color4 = new Color();
byte nRed, nGreen, nBlue;
byte bp1, bp2;
for (int x = 0; x < bmap.Width; ++x)
{
for (int y = 0; y < bmap.Height; ++y)
{
fr_x = (int)Math.Floor(x * nWidthFactor);
fr_y = (int)Math.Floor(y * nHeightFactor);
cx = fr_x + 1;
if (cx >= temp.Width) cx = fr_x;
cy = fr_y + 1;
if (cy >= temp.Height) cy = fr_y;
fx = x * nWidthFactor - fr_x;
fy = y * nHeightFactor - fr_y;
nx = 1.0 - fx;
ny = 1.0 - fy;
color1 = temp.GetPixel(fr_x, fr_y);
color2 = temp.GetPixel(cx, fr_y);
color3 = temp.GetPixel(fr_x, cy);
color4 = temp.GetPixel(cx, cy);
// Blue
bp1 = (byte)(nx * color1.B + fx * color2.B);
bp2 = (byte)(nx * color3.B + fx * color4.B);
nBlue = (byte)(ny * (double)(bp1) + fy * (double)(bp2));
// Green
bp1 = (byte)(nx * color1.G + fx * color2.G);
bp2 = (byte)(nx * color3.G + fx * color4.G);
nGreen = (byte)(ny * (double)(bp1) + fy * (double)(bp2));
// Red
bp1 = (byte)(nx * color1.R + fx * color2.R);
bp2 = (byte)(nx * color3.R + fx * color4.R);
nRed = (byte)(ny * (double)(bp1) + fy * (double)(bp2));
bmap.SetPixel(x, y, System.Drawing.Color.FromArgb(255, nRed, nGreen, nBlue));
}
}
_currentBitmap = (Bitmap)bmap.Clone();
}
}