We Keep Coding

Rotating image in WPF not respecting screen size

I am currently having trouble when rotating an image in WPF, using RotateTransform and LayoutTransform. When an image, that has a pixel height size greater than the monitors height and is rotated at 90º or 270º, the window size will be higher than the monitors screen resolution size.
Example screenshots:
Application running with image at 90º
Application running with image at 0º
I am using the code below (simplified), with mainWindow.img being a System.Windows.Control.Image:
static void Rotate(int degrees)
{
var rt = new RotateTransform { Angle = degrees };
mainWindow.img.LayoutTransform = rt;
}
It is for a a picture viewer project, the full source code is available at https://github.com/Ruben2776/PicView
I have tried shifting the Width and Height values of the image, but it produces an undesired result (skewed proportion).
The sizing calculation, for the image size, is made based on the user's screen height, using the following trimmed code:
int interfaceHeight = 90;
double maxWidth = Math.Min(MonitorInfo.Width, width);
double maxHeight = Math.Min((MonitorInfo.Height - interfaceHeight), height);
double AspectRatio = Math.Min((maxWidth / width), (maxHeight / height));
mainWindow.img.Width = (width * AspectRatio);
mainWindow.img.Height = (height * AspectRatio);
with height and width being the image's dimensions and MonitorInfo being a class that retrieves the current monitors resolution.
Update
Below is the minimal code for a sample WPF app illustrating the issue:
MainWindow.xaml
<Window x:Class="RotateTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
SizeToContent="WidthAndHeight"
Title="MainWindow" >
<Grid>
<Image x:Name="img" Stretch="Fill" Source="https://w.wallhaven.cc/full/nk/wallhaven-nkrwz1.jpg"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
namespace RotateTest
{
public partial class MainWindow : Window
{
int Degrees;
public MainWindow()
{
InitializeComponent();
ContentRendered += MainWindow_ContentRendered;
KeyDown += MainWindow_KeyDown;
}
private void MainWindow_KeyDown(object sender, KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
Rotate(true);
break;
case Key.Down:
Rotate(false);
break;
}
}
private void MainWindow_ContentRendered(object sender, EventArgs e)
{
int interfaceHeight = 90;
double maxWidth = Math.Min(SystemParameters.PrimaryScreenWidth, img.Source.Width);
double maxHeight = Math.Min(SystemParameters.PrimaryScreenHeight - interfaceHeight, img.Source.Height);
double AspectRatio = Math.Min((maxWidth / img.Source.Width), (maxHeight / img.Source.Height));
img.Width = (img.Source.Width * AspectRatio);
img.Height = (img.Source.Height * AspectRatio);
}
void Rotate(int degrees)
{
var rt = new RotateTransform { Angle = Degrees = degrees };
img.LayoutTransform = rt;
}
void Rotate(bool right)
{
switch (Degrees)
{
case 0:
if (right)
{
Rotate(270);
}
else
{
Rotate(90);
}
break;
case 90:
if (right)
{
Rotate(0);
}
else
{
Rotate(180);
}
break;
case 180:
if (right)
{
Rotate(90);
}
else
{
Rotate(270);
}
break;
case 270:
if (right)
{
Rotate(180);
}
else
{
Rotate(0);
}
break;
}
}
}
}

The root of the problem is that you are only calculating your scaling ratios based on the the image's size when it's not rotated. Once you rotate the image, img.ActualHeight effectively becomes its width and img.ActualWidth effectively becomes its height, and your calculation from when the image was un-rotated is no longer correct.
Here are the changes and additions I made to your code:
private double normalRatio;
private double rotatedRatio;
private void MainWindow_ContentRendered(object sender, EventArgs e)
{
double interfaceHeight = this.ActualHeight - img.ActualHeight;
normalRatio = Math.Min(SystemParameters.WorkArea.Width / img.Source.Width, (SystemParameters.WorkArea.Height - interfaceHeight) / img.Source.Height);
rotatedRatio = Math.Min(SystemParameters.WorkArea.Width / img.Source.Height, (SystemParameters.WorkArea.Height - interfaceHeight) / img.Source.Width);
ScaleImage();
}
private void ScaleImage()
{
double ratio = Degrees == 0 || Degrees == 180 ? normalRatio : rotatedRatio;
img.Width = (img.Source.Width * ratio);
img.Height = (img.Source.Height * ratio);
}
void Rotate(bool right)
{
if (right)
{
Degrees -= 90;
if (Degrees < 0) { Degrees += 360; }
}
else
{
Degrees += 90;
if (Degrees >= 360) { Degrees -= 360; }
}
ScaleImage();
Rotate(Degrees);
}
//I left the other methods, including Rotate(int degrees), the same as in your question
Here's an explanation of what I changed:
interfaceHeight is calculated by subtracting the height of the image from the height of the window, the difference being the aggrigate size of everything else.
Instead of using MonitorInfo, I'm using SystemParameters.WorkArea, because it takes into account the size and placement of the Windows taskbar.
I calculate two scale ratios: normalRatio, for when the image is not rotated or is vertically flipped (180°), and rotatedRatio, for when the image is rotated 90° in either direction. I calculate the later by swapping img.Source.Height and img.Source.Width.
I added a ScaleImage() method to do the actual image scaling based on the intended rotation, so I can call it from two different places.
I simplified Rotate(bool right) to calculate the new angle using math, instead of listing out each possible rotation.
The above results in an image that is always as big as possible for the screen while maintaining the original aspect ratio. It will grow and shrink as it's rotated to fit the screen. If you want the image to stay a constant size instead, just use Math.Min(normalRatio, rotatedRatio).
Note that the above only works if you call Rotate(bool right), not if you call Rotate(int degrees) directly. This is because the logic of using two ratios only works because there are only two possible sizes for the image (portrait and landscape), which is only the case if you restrict the rotation to increments of 90°. If you want to set the angle to something else, like 20°, the math to calculate the image's effective size becomes a bit more complicated and you would need to start calculating it dynamically based on the angle.

Resizing bitmap in PictureBox

I'm trying to properly Zoom in/out Image in PictureBox.
I have this code.
private Image GridMap;
private double ZoomFactor = 1;
protected override void OnMouseWheel(MouseEventArgs e)
{
if (e.Delta > 0)
{
ZoomFactor*=1.2;
}
else if (e.Delta < 0 && ZoomFactor >1 )
{
ZoomFactor /= 1.2;
}
Size newSize = new Size((int)(GridMap.Width * ZoomFactor), (int)(GridMap.Height * ZoomFactor));
Bitmap bmp = new Bitmap(GridMap, newSize);
MainGrid.Image = bmp;
}
Where MainGrid is PictureBox where i want to zoom.
This code works, but very slow after scrolling I wait 1-2seconds and then it shows the zoomed picture. with (800,800) image. Which is very slow.
I think I know why. Its copying resized bitmap instead of using just part of old one, but I don't know how to do it.
How Can I make it smoothly zooming?

Ok At the end i figure that out...
What i needed is to cut out piece of my bitmap final code is>
protected override void OnMouseWheel(MouseEventArgs e)
{
if (e.Delta > 0 && ZoomFactor >MaxZoom)
{
ZoomFactor-=0.01;
}
else if (e.Delta < 0 && ZoomFactor <1 )
{
ZoomFactor += 0.01;
}
Rectangle srcRect = new Rectangle(0, 0, (int)(GridMap.Width * ZoomFactor), (int)(GridMap.Height * ZoomFactor));
Bitmap cropped = ((Bitmap)GridMap).Clone(srcRect, MainGrid.Image.PixelFormat);
MainGrid.Image = cropped;
}
And plus Initiate of PictureBox with
this.MainGrid.SizeMode = PictureBoxSizeMode.Zoom;

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();
}
}
}

Make an Image Scale with Mouse Scroll Wheel XNA

I have an image that I want to increase the size or decrease the size if the mouse wheel is scrolled up or down accordingly. If the image reaches a set max size it will not get ant larger and vice versa if making the image smaller. The problem I am having is once you reach the maximum size of the image and continue scrolling up then go to scroll down the image will not get smaller right away until you scrolled down the same number of times you scrolled up while having the image at the max size and again reverse for making the image smaller. ScrollWheelValue is an read only property so it cannot be reset. I was trying to add some logic where if the wheel is scrolled up and the image is max size subtract 120 because 120 is what the mouse increases per scroll. Can anyone help me with this issue? Thanks very much
Original Code:
float scale = ms.ScrollWheelValue / 120;
scaleFactor = scale * scaleChange;
if (scaleFactor > MAX_SCALE)
{
scaleFactor = MAX_SCALE;
}
else if (scaleFactor < MIN_SCALE)
{
scaleFactor = MIN_SCALE;
}
New Code:
if (scaleFactor > MAX_SCALE)
{
scaleFactor = MAX_SCALE;
float newScale = ms.ScrollWheelValue / 120;
if (newScale > scale)
{
scaleCount = scaleCount - 120;
}
if (newScale < scale)
{
scaleCount = scaleCount + 120;
}
}
else if (scaleFactor < MIN_SCALE)
{
scaleFactor = MIN_SCALE;
float newScale = ms.ScrollWheelValue / 120;
if (newScale > scale)
{
scaleCount = scaleCount - 120;
}
if (newScale < scale)
{
scaleCount = scaleCount + 120;
}
}
else
{
scale = ms.ScrollWheelValue / 120 + scaleCount;
scaleFactor = scale * scaleChange;
}

If you read:
MSDN MouseState Scroll Wheel Value
You'll see that it keeps a running value from the beginning of the game. So what you want to do is check it for a change vs. the previous value and do something accordingly.
How you have it set up it seems you don't care about the actual value, just the difference since the last time they scrolled the wheel.
declare these outside of your update loop:
float prevWheelValue;
float currWheelValue;
Then in your update:
prevWheelValue = currWheelValue;
currWheelValue = ms.ScrollWheelValue;
now your checks can simply be if prevWheelValue > < or == to currWheelValue and clamp the value to the boundaries that you want.
Mathhelper.Clamp

How to zoom in using Mouse Position on that image

I have a userControl library, which consists of the main Panel and a PictureBox, I want to make a zoomable PictureBox tool, I zoom in and out using mouseWheel event of the main Panel, the problem that I can't figure out how do I zoom in by the mouse position on the image, so whenever I zoom in, the zoom goes the Top-Left corner of the panel, so how do I fix that?
private double ZOOMFACTOR = 1.15; // = 15% smaller or larger
private int MINMAX = 5;
void picPanel_MouseWheel(object sender, MouseEventArgs e)
{
if (e.Delta > 0)
{
ZoomIn();
}
else
{
ZoomOut();
}
}
private void ZoomIn()
{
if ((picBox.Width < (MINMAX * this.Width)) &&
(picBox.Height < (MINMAX * this.Height)))
{
picBox.Width = Convert.ToInt32(picBox.Width * ZOOMFACTOR);
picBox.Height = Convert.ToInt32(picBox.Height * ZOOMFACTOR);
}
}
private void picBox_MouseEnter(object sender, EventArgs e)
{
if (picBox.Focused) return;
picBox.Focus();
}
Update :
I have tried this, it looks like working, but not exactly as it should be!! Any ideas?
private void ZoomIn()
{
if ((picBox.Width < (MINMAX * this.Width)) &&
(picBox.Height < (MINMAX * this.Height)))
{
picBox.Width = Convert.ToInt32(picBox.Width * ZOOMFACTOR);
picBox.Height = Convert.ToInt32(picBox.Height * ZOOMFACTOR);
Point p = this.AutoScrollPosition;
int deltaX = e.X - p.X;
int deltaY = e.Y - p.Y;
this.AutoScrollPosition = new Point(deltaX, deltaY);
}
}

This is the example of Zoom image on mouse position....
tested verified.
protected override void OnMouseWheel(MouseEventArgs ea)
{
// flag = 1;
// Override OnMouseWheel event, for zooming in/out with the scroll wheel
if (picmap1.Image != null)
{
// If the mouse wheel is moved forward (Zoom in)
if (ea.Delta > 0)
{
// Check if the pictureBox dimensions are in range (15 is the minimum and maximum zoom level)
if ((picmap1.Width < (15 * this.Width)) && (picmap1.Height < (15 * this.Height)))
{
// Change the size of the picturebox, multiply it by the ZOOMFACTOR
picmap1.Width = (int)(picmap1.Width * 1.25);
picmap1.Height = (int)(picmap1.Height * 1.25);
// Formula to move the picturebox, to zoom in the point selected by the mouse cursor
picmap1.Top = (int)(ea.Y - 1.25 * (ea.Y - picmap1.Top));
picmap1.Left = (int)(ea.X - 1.25 * (ea.X - picmap1.Left));
}
}
else
{
// Check if the pictureBox dimensions are in range (15 is the minimum and maximum zoom level)
if ((picmap1.Width > (imagemappan.Width)) && (picmap1.Height > (imagemappan.Height)))
{
// Change the size of the picturebox, divide it by the ZOOMFACTOR
picmap1.Width = (int)(picmap1.Width / 1.25);
picmap1.Height = (int)(picmap1.Height / 1.25);
// Formula to move the picturebox, to zoom in the point selected by the mouse cursor
picmap1.Top = (int)(ea.Y - 0.80 * (ea.Y - picmap1.Top));
picmap1.Left = (int)(ea.X - 0.80 * (ea.X - picmap1.Left));
}
}
}
}

The problem is that your control is acting like a viewport - the origin is top left, so every time you stretch the image you're doing it from that corner - the upshot is you wind up zooming into the top left corner, you need to offset the stretched image and centre the point the user zoomed in on.
image size: 200,200
user clicks 100,50 and zooms in x2
stretch the image
image size 400,400, and the place the user clicked is now effectively at 200,100
you need to slide the image 100 px left and 50 px up to correct for re-sizing the image
You'll need to override the paint event handler to draw the image offset:
RectangleF BmpRect = new RectangleF((float)(Offset.X), (float)(Offset.Y), (float)(ZoomedWidth), (float)(ZoomedHeight));
e.Graphics.DrawImage(Bmp, ViewPort , BmpRect, GraphicsUnit.Pixel);
Bmp is your image; ViewPort is a Rectangle defined by your pictureBox control
Here is a thread that might help.