I have pinch & zoom effect on an image. Is there a way I can reflect the changes in height and width of that image? I want to store the changes user has made to the size of image for later use.
or is there any other way I can make my image resizable for user that can allow me to save its width and height?
EDIT: The code I have is:
private void ResourceImage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Point flipViewScreenCoords = models_list.TransformToVisual(Window.Current.Content).TransformPoint(new Point(0, 0));
Image currentImage = sender as Image;
Point currentImageCoords = currentImage.TransformToVisual(Window.Current.Content).TransformPoint(new Point(0, 0));
CompositeTransform transform = currentImage.RenderTransform as CompositeTransform;
if ((currentImageCoords.X + currentImage.Width < flipViewScreenCoords.X + models_list.ActualWidth) && e.Delta.Translation.X > 0)
{
transform.TranslateX += e.Delta.Translation.X;
}
if (currentImageCoords.X > flipViewScreenCoords.X && e.Delta.Translation.X < 0)
{
transform.TranslateX += e.Delta.Translation.X;
}
if (currentImageCoords.Y + currentImage.Height < flipViewScreenCoords.Y + models_list.ActualHeight && e.Delta.Translation.Y > 0)
{
transform.TranslateY += e.Delta.Translation.Y;
}
if (currentImageCoords.Y > flipViewScreenCoords.Y && e.Delta.Translation.Y < 0)
{
transform.TranslateY += e.Delta.Translation.Y;
}
transform.ScaleX *= e.Delta.Scale;
transform.ScaleY *= e.Delta.Scale;
}
I have my image inside a flipview and the image is movable but should not leave the dimensions of flipview therefore I am using the if/else statements in this code. Now I am looking for a way to save the changed width/height of the image. Something like currentImage.Width = ??
Related
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;
I would like to zoom image with mouse in the picturebox. The code below zoom the image but the picture box zoom itself. I want to zoom the image without zooming the picturebox. What can i edit the code below? Thanks
protected override void OnMouseWheel(MouseEventArgs ea)
{
Image img = Image.FromFile("C:/Users/User/Desktop/11.png");
// flag = 1;
// Override OnMouseWheel event, for zooming in/out with the scroll wheel
if (pictureBox1.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 ((pictureBox1.Width < (15 * this.Width)) && (pictureBox1.Height < (15 * this.Height)))
{
// Change the size of the picturebox, multiply it by the ZOOMFACTOR
pictureBox1.Width = (int)(pictureBox1.Width * 1.25);
pictureBox1.Height = (int)(pictureBox1.Height * 1.25);
// Formula to move the picturebox, to zoom in the point selected by the mouse cursor
pictureBox1.Top = (int)(ea.Y - 1.25 * (ea.Y - pictureBox1.Top));
pictureBox1.Left = (int)(ea.X - 1.25 * (ea.X - pictureBox1.Left));
}
}
else
{
// Check if the pictureBox dimensions are in range (15 is the minimum and maximum zoom level)
if ((pictureBox1.Width > (img.Width)) && (pictureBox1.Height > (img.Height)))
{// Change the size of the picturebox, divide it by the ZOOMFACTOR
pictureBox1.Width = (int)(pictureBox1.Width / 1.25);
pictureBox1.Height = (int)(pictureBox1.Height / 1.25);
// Formula to move the picturebox, to zoom in the point selected by the mouse cursor
pictureBox1.Top = (int)(ea.Y - 0.80 * (ea.Y - pictureBox1.Top));
pictureBox1.Left = (int)(ea.X - 0.80 * (ea.X - pictureBox1.Left));
}
}
}
I display the images on canvas and I want to be able to move all the images. Currently I am only able to move the last image which I brought on canvas. I also want to be able to zoom these images. Please help me in this.
private TranslateTransform dragTranslation;
// Constructor
void Drag_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e)
{
// Move the rectangle.
dragTranslation.X += e.Delta.Translation.X;
dragTranslation.Y += e.Delta.Translation.Y;
}
private void Stickers1_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
var selecteditem = e.AddedItems[0] as StickersImageListModel;
Stickers1.Visibility = Visibility.Collapsed;
Image imageitem = new Image();
BitmapImage image = new BitmapImage(new System.Uri(selecteditem.Imageurl, UriKind.Absolute));
imageitem.Source = image;
my_canvas.Children.Add(imageitem);
imageitem.AllowDrop = true;
imageitem.ManipulationMode = ManipulationModes.All;
imageitem.ManipulationDelta += Drag_ManipulationDelta;
dragTranslation = new TranslateTransform();
imageitem.RenderTransform = this.dragTranslation;
var st = (ScaleTransform)imageitem.RenderTransform;
double zoom = e.Delta > 0 ? .2 : -.2;
st.ScaleX += zoom;
st.ScaleY += zoom;
my_canvas.Visibility = Visibility.Visible;
}
You dont have to use dragTranslation property
void Drag_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e)
{
// Move the rectangle.
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < 1.0) ct.ScaleX = 1.0;
if (ct.ScaleY < 1.0) ct.ScaleY = 1.0;
if (ct.ScaleX > 4.0) ct.ScaleX = 4.0;
if (ct.ScaleY > 4.0) ct.ScaleY = 4.0;
//Checking with canvas boundary so that image wont go behind canvas
if ((ct.TranslateX + e.Delta.Translation.X) <= (mycanvas.ActualWidth - img.ActualWidth) && ct.TranslateX + e.Delta.Translation.X>=0)
ct.TranslateX += e.Delta.Translation.X;
if ((ct.TranslateY + e.Delta.Translation.Y) <= (mycanvas.ActualHeight - img.ActualHeight) && ct.TranslateY + e.Delta.Translation.Y >= 0)
ct.TranslateY += e.Delta.Translation.Y;
}
private void Stickers1_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
...
//Using CompositeTransform instead of TranslateTransform
CompositeTransform ct = new CompositeTransform();
imageitem.RenderTransform = ct;
}
I'm going to finish a application but I have a problem about scroll selection. I has zoom in and out that's ok.I has asked so many question but no one are not reply.Help me about scroll... This picture is zooming in:
<ListView Name="lst_intro">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding link}"
Stretch="Uniform"
RenderTransformOrigin="0.5,0.5"
ManipulationDelta="img_intro_ManipulationDelta"
ManipulationMode="Scale">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < mincale) ct.ScaleX = mincale;
if (ct.ScaleY < mincale) ct.ScaleY = mincale;
ScaleTransform scale=new ScaleTransform();
}
You set ManipulationMode="Scale", meaning you cannot drag it left/right/down/up - that is call a translation, set it as ManipulationMode="Scale,TranslateX,TranslateY".
In the event handler, similar to what you did for the Scale transform, you do a Translate transform.
private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
if (ct == null) return;
//Scale transform
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < mincale) ct.ScaleX = mincale;
if (ct.ScaleY < mincale) ct.ScaleY = mincale;
//Translate transform
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
//Confine boundary
BringIntoBounds();
}
After the transformation, brings the image back if it is out of the boundary. You can detect if the image is out of boundary by comparing the values of TranslateX/TranslateY and the width/height of the boundary. The boundary is the parent of the image (it is a Grid?), you need to debug the code to determine the boundary for TranslateX and TranslateY.
public void BringIntoBounds()
{
CompositeTransform ct = img.RenderTransform as CompositeTransform;
if (ct == null) return;
//out of screen, left edge
if (ct.TranslateX < 10 - img.ActualWidth * ct.ScaleX)
{
ct.TranslateX = 10 - img.ActualWidth * ct.ScaleX;
}
//out of screen, right edge
if (ct.TranslateX > Container.ActualWidth - 10 )
{
ct.TranslateX = Container.ActualWidth - 10;
}
...do the same for Y.
}
kennyzx gave a very good answer but the part where you test if the image is out of boundaries isn't working for me... that's my solution:
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
ct.ScaleX = Math.Min(4, Math.Max(1, ct.ScaleX));
ct.ScaleY = Math.Min(4, Math.Max(1, ct.ScaleY));
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
var translateY = (img.ActualHeight * ct.ScaleY - img.ActualHeight) / 2;
ct.TranslateY = Math.Min(translateY, Math.Max(0 - translateY, ct.TranslateY));
var translateX = (img.ActualWidth * ct.ScaleX - img.ActualWidth) / 2;
ct.TranslateX = Math.Min(translateX, Math.Max(0 - translateX, ct.TranslateX));
}
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.