I have an Application where I put Pictureboxes on a Panel. After I successfully implemented Drag&Drop for the Pictureboxes, I wanted to add a Grid option to conviniently move the Pictureboxes on the Panel. The code I used is
private void PB14_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
if (grid)
{
if (MousePosition.X % 10 == 0)
{
PBList[14].Location = new Point(PList[parent].PointToClient(new Point(MousePosition.X, MousePosition.Y)).X, PBList[14].Location.Y);
}
if (MousePosition.Y % 10 == 0)
{
PBList[14].Location = new Point(PBList[14].Location.X, PList[parent].PointToClient(new Point(MousePosition.X, MousePosition.Y)).Y);
}
}
else
{
...
}
}
}
PList is a List of Panels, PList[parent] is the parent in which the picturebox (out of a Pictureboxlist) PBList[14] is.
The Problem is that the Picturebox is not smoothely moving, sometimes it doesnt move at all. I found out that some values for the % operation are better some are worse, for example if I put
if (MousePosition.X % 30 == 0)
in the if statement, it is worse than 10.
I put the values of the if() in labels and i saw that it would sometimes skip the calculation, means the value jumped from 9 to 1, skipping the pixel where it should be 0 and the Picturebox didnt move.
Do you know any better ways of calculating the mouse coordinates for this purpose?
You'll want to determine the closest pixel of the grid pixels to your mouse position.
PBList[14].Location = new Point(PList[parent].PointToClient(new Point(MousePosition.X - (MousePosition.X % 10) + 5, MousePosition.Y - (MousePosition.Y % 10) + 5)).X);
Although my confusion is setting in here about the required parameters for PointToClient.
The jist of it is, recalculate the position for each mouse move regardless of whether it is directly on your 'grid by 10s', assign the location if it is different from the last (to save resources on re-painting) and find the closest 'grid by 10s' position by subracting the co-ords remainder of 10 from the co-ord
The problem is you only move anything when the mouse is exactly over one of the grid points.
One way to do this is allowing an extra pixel on each side:
if ((MousePosition.X+1) % 30 < 3)
{
int newX = MousePosition.X + 1 - ((MousePosition.X+1) % 30);
PBList[14].Location = new Point(PList[parent].PointToClient(new Point(newX, MousePosition.Y)).X, PBList[14].Location.Y);
}
//Same for Y
I was able to add snap-to-grid behaviour to my typical drag-and-drop implementation. The grid is based on the Control's Height and Width. You can change this by replacing control.Height and control.Width with constants, if you prefer. You may also want to prevent the Control from being dragged off screen.
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
control.Left = ((e.X + control.Left) / control.Width) * control.Width;
control.Top = ((e.Y + control.Top) / control.Height) * control.Height;
}
}
If you want the Control to drag smoothly and only snap-to-grid when you release the mouse button instead:
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
control.Left += e.X - offset.X;
control.Top += e.Y - offset.Y;
}
}
private void OnMouseUp(object sender, MouseEventArgs e)
{
control.Left = ((control.Left + control.Width / 2) / control.Width) * control.Width;
control.Top = ((control.Top + control.Height / 2) / control.Height) * control.Height;
}
private void OnMouseDown(object sender, MouseEventArgs e)
{
offset = e.Location;
}
Related
I have developed windows application in c# where I have a pictureBox inside a panel. I have applied zoom in and zoom out functionality in it. Now I want the image inside the pictureBox to pan. I have applied mouseDown, mouseMove and mouseUp event on pictureBox. The code for it is:
private void pictureBox2_MouseDown(object sender, MouseEventArgs e)
{
if (pflag == 1)
{
dragging = true;
start = e.Location;
}
}
private void pictureBox2_MouseMove(object sender, MouseEventArgs e)
{
// panning code
if (pflag == 1)
{
if (dragging && zoom == 1)
{
pictureBox2.Location = new Point(pictureBox2.Left + (e.Location.X - start.X), pictureBox2.Top + (e.Location.Y - start.Y));
}
}
}
private void pictureBox2_MouseUp(object sender, MouseEventArgs e)
{
if (pflag == 1)
{
dragging = false;
}
}
Here the image is panning but with no boundary control. Sometimes even the image goes below the panel area while panning. What I need here is, image should move top, left , right, bottom according to zoom factor i.e like how scroll bar works and not beyond that.
You don't need to worry about zoom as the mouse coordinates will be fine as they are. The distance of the shown pixels should be the same as those the cursor is moving..
You also do not really need the dragging variable, unless you use it for something else.
However you do need to check the mouse button during the MouseMove:
if (pflag == 1 && e.Button == System.Windows.Forms.MouseButtons.Left )
Do note few things:
The user expects that the spot he drags stays with the mouse cursor just as the pixel he touches should always move with the fingertip. Do not surprise him by scaling in the zoom-factor!
If you wanted to do that you would need to use a factor, not adding an number.
Yes, the scrollbars will factor in the zoom but also the lift will still stay with the mouse!
Here is an example of how to set limits to prevent the user from going too far. It it a little involved because it needs to work when zoomed in or out. Do not start with illegal positions, though, nor get into those while zooming!
// panning code
if ( pflag == 1 && e.Button == System.Windows.Forms.MouseButtons.Left )
{
{
Rectangle panRect = new Rectangle(panel1.Location, panel1.ClientSize);
Rectangle picRect = new Rectangle(pictureBox2.Location, pictureBox2.ClientSize);
int newLeft = pictureBox2.Left + (e.Location.X - start.X);
int newTop = pictureBox2.Top + (e.Location.Y - start.Y);
int newRight = newLeft + picRect.Width;
int newBottom = newTop + picRect.Height;
if ((newLeft < 0 && newRight < panRect.Width)
|| (newLeft > 0 /*&& newRight > panRect.Width */)) newLeft = picRect.Left;
if ((newTop < 0 && newBottom < panRect.Width)
|| (newTop > 0 /*&& newBottom > panRect.Height*/)) newTop = picRect.Top;
pictureBox2.Location = new Point(newLeft, newTop);
}
Text = "" + pictureBox2.Location;
}
Note the two parts I have commented out! As it is you can't move a picture that is smaller than the viewport; you can allow it by removing the comments but should then take care when zooming in to move it up and left to zero as it should never sit in the positve range and also overlap or else the scrollbars will behave in a weird way..!
I have a drag and drop interface in my Universal Windows App, where the user can add a textbox to the image, and drag and scale it around, as if it was a textbox in MSPaint, but it can be edited after it is placed, by double-tapping it.
I have implemented this as such:
textBox.LostFocus sets textBox.IsReadOnly = true;
textBox.DoubleTapped sets IsReadOnly back to false, so that it can drag around.
textBox.ManipulationDelta moves the textBox around.
Now I have the problem that the textBox has this rubberbanding effect going on, and that this blocks the manipulation event.
Is there a way to disable this? Or can I for example say when the mouse clicks (or finger or whatever), that it should start the manipulation event?
Code for a new TextBox:
private TextBox CreateManipulativeTextBox(string text)
{
var textBox = new TextBox
{
Text = text,
Background = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0)),
BorderBrush = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0)),
Width = 150,
Height = 50,
ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.Scale,
RenderTransform = new CompositeTransform()
};
// Doubletap gives edit possibility, tap outside loses editability
textBox.LostFocus += TextBoxOnLostFocus;
textBox.DoubleTapped += TextBoxOnDoubleTapped;
// Add manipulation events
textBox.ManipulationStarted += OnManipulationStarted;
textBox.ManipulationDelta += OnManipulationDelta;
textBox.ManipulationCompleted += OnManipulationCompleted;
return textBox;
}
Code for focus and defocus:
private void TextBoxOnDoubleTapped(object sender, DoubleTappedRoutedEventArgs doubleTappedRoutedEventArgs)
{
(sender as TextBox).IsReadOnly = false;
}
private void TextBoxOnLostFocus(object sender, RoutedEventArgs routedEventArgs)
{
(sender as TextBox).IsReadOnly = true;
}
Code for manipulation:
private void OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
if (sender is TextBox)
(sender as TextBox).IsReadOnly = true;
((FrameworkElement)sender).Opacity = 0.6;
}
private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var frameworkElement = (FrameworkElement)sender;
var transform = (CompositeTransform)frameworkElement.RenderTransform;
// LEFT-RIGHT bounds
if (e.Delta.Translation.X < 0) // Going left
{
if (DrawingArea.ActualWidth / 2 + (transform.TranslateX + e.Delta.Translation.X) - frameworkElement.ActualWidth / 2 > 0)
{
// Staying inside, apply translation
transform.TranslateX += e.Delta.Translation.X;
}
else
{
// Trying to go outside, because scale sucks to work with, move image back inside
transform.TranslateX = frameworkElement.ActualWidth / 2 - DrawingArea.ActualWidth / 2;
}
}
else // Going right
{
if (DrawingArea.ActualWidth / 2 - (transform.TranslateX + e.Delta.Translation.X) +
frameworkElement.ActualWidth * (0.5 - transform.ScaleX) > 0)
{
// Staying inside, apply translation
transform.TranslateX += e.Delta.Translation.X;
}
else
{
// Trying to go outside, because scale sucks to work with, move image back inside
transform.TranslateX = frameworkElement.ActualWidth * (0.5 - transform.ScaleX) + DrawingArea.ActualWidth / 2;
}
}
// UP-DOWN bounds
if (e.Delta.Translation.Y < 0) // Going up
{
if (DrawingArea.ActualHeight / 2 + (transform.TranslateY + e.Delta.Translation.Y) - frameworkElement.ActualHeight / 2 >
0)
{
// Staying inside, apply translation
transform.TranslateY += e.Delta.Translation.Y;
}
else
{
// Trying to go outside, because scale sucks to work with, move image back inside
transform.TranslateY = frameworkElement.ActualHeight / 2 - DrawingArea.ActualHeight / 2;
}
}
else // Going down
{
if (DrawingArea.ActualHeight / 2 - (transform.TranslateY + e.Delta.Translation.Y) +
frameworkElement.ActualHeight * (0.5 - transform.ScaleY) > 0)
{
// Staying inside, apply translation
transform.TranslateY += e.Delta.Translation.Y;
}
else
{
// Trying to go outside, because scale sucks to work with, move image back inside
// transform.TranslateY = image.ActualHeight*(0.5 - transform.ScaleY) + DrawingArea.ActualHeight/2;
// Dragging down, remove image
DrawingArea.Children.Remove(frameworkElement);
}
}
// Only allow scaling when both dimensions are smaller than the drawingarea
if (frameworkElement.ActualHeight * (transform.ScaleY * e.Delta.Scale) < DrawingArea.ActualHeight &&
frameworkElement.ActualWidth * (transform.ScaleX * e.Delta.Scale) < DrawingArea.ActualWidth)
{
transform.ScaleX *= e.Delta.Scale;
transform.ScaleY *= e.Delta.Scale;
}
}
private void OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
((FrameworkElement)sender).Opacity = 1;
}
EDIT: This only happens with touch, when the mouse drags the item around it works.
I am creating an application, in which user will be able to Upload an image and then Zoom in and Out the image on a particular location (current mouse pointer).
Also user should be able to drag the image to see other parts of the image when the image is zoomed.
I have implemented some functionality to achieve it but i am scaling the complete image. I want to know that how i can scale a particular portion of image, or scale the complete image and then point to that location where my current mouse pointer is placed.
Code:
private void DisplayIsdDiagram(BO.IsdDiagram IsdDiagram)
{
DoubleBuffered = true;
zoomFac = 1;
translateX = 0;
translateY = 0;
transStartX = 0f;
transStartY = 0f;
picIsdDiagram.BorderStyle = BorderStyle.Fixed3D;
bmp = new Bitmap(Image.FromStream(new MemoryStream(IsdDiagram.Image.ToArray())));
if (bmp.Width > bmp.Height)
{
ratio = (float)picIsdDiagram.Width / (float)bmp.Width;
translateRatio = (float)bmp.Width / (float)picIsdDiagram.Width;
}
else
{
ratio = (float)picIsdDiagram.Height / (float)bmp.Height;
translateRatio = (float)bmp.Height / (float)picIsdDiagram.Height;
}
//picIsdDiagram.Image = bmp;
picIsdDiagram.Refresh();
picIsdDiagram.MouseWheel += new MouseEventHandler(picIsdDiagram_MouseWheel);
}
private void picIsdDiagram_MouseWheel(object sender, MouseEventArgs e)
{
IsZooming = true;
if (e.Delta < 0)
{
if (zoomFac > 1)
zoomFac = zoomFac - (float)0.1;
}
else
{
if (zoomFac <= 5)
zoomFac = zoomFac + (float)0.1;
}
picIsdDiagram.Refresh();
IsZooming = false;
}
private void picIsdDiagram_MouseDown(object sender, MouseEventArgs e)
{
IsZooming = false;
IsMouseDown = true;
transStartX = e.X;
transStartY = e.Y;
}
private void picIsdDiagram_MouseUp(object sender, MouseEventArgs e)
{
IsZooming = false;
IsMouseDown = false;
translateX = translateX + ((e.X - transStartX) * (translateRatio / zoomFac));
translateY = translateY + ((e.Y - transStartY) * (translateRatio / zoomFac));
picIsdDiagram.Refresh();
}
private void picIsdDiagram_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.ScaleTransform(ratio * zoomFac, ratio * zoomFac);
if (IsZooming == false && IsMouseDown == true)
g.TranslateTransform(translateX, translateY);
g.DrawImage(bmp, 0, 0);
}
I tried to get the current mouse position from MouseHover event and tried to Translate the picture when only Zoom is done, but that is not working.
Also the Picture Box has some other multiple Picture boxes inside it, to show some representation on the big image. While scaling the Big Image, small images (inside images) should not be scaled. Although there position needs to be recalculated to show them at their real places even after zooming on the Big image.
So in above i am facing two problems:
1) To Zoom an Image at any particular location (current mouse pointer)
by scrolling.
2) To regenerate the coordinates of the sub images while
zooming and translating.
Any help that can guide me in correct direction.
Also if by any other means, i could be able to achieve this functionality.
Application : Windows
Control : Picture Box (Please suggest if any other control can be used, if not possible with this)
Language : C#
Waiting for response!
PictureEdit control provided by DevExpress 13.2
I've been trying to do this for a few hours now, but for the life of me I can't make it possible.
What I'm trying to do is simply move the image found within a picture box in a winform application. My image is roughly 1000x1000 pixels and my box is something arbitrary like 400x500, so, for example, when I click the mouse I'd want the image to move 50 to the left. But the image box should remain the same size.
For the life of me, however, I can't get this to work. What I have been able to do is the following:
if (kinectController.hands[0].fingertips.Count == 1)
{
pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
}
This function is for my kinect finger tracking app. So when the application finds a single finder point visiable on the screen, the image is centered. However, I would eventually like the image to move along with my finger movement, which will come once I work out the basic step of moving the image a few pixels to the side.
Any help with this would be appreciated.
I did a little bit of research and apparently moving an image within a PictureBox is no easy task, at the very least I couldn't find anything that would make this possible (not saying there isn't a way to do it though).
However, I came up with a bit of a "workaround", see if this fits your needs. To accomplish this:
Create a Panel control, and size it to however much of the image you
would like to display
Inside that panel place a PictureBox control with your image in it
and set the SizeMode property to AutoSize.
Now, put this code in your form
private bool Dragging;
private int xPos;
private int yPos;
private void pictureBox1_MouseUp(object sender, MouseEventArgs e) { Dragging = false; }
private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left) {
Dragging = true;
xPos = e.X;
yPos = e.Y;
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
Control c = sender as Control;
if (Dragging && c!= null) {
c.Top = e.Y + c.Top - yPos;
c.Left = e.X + c.Left - xPos;
}
}
Now whenever you click and drag on the PictureBox, it won't actually move the image within it, but the PictureBox control within the panel. Again, not exactly what you were looking for and I'm not sure how this would convert over to Kinect, but I hope this gets you on the right track.
Not enough reputation to comment but I wanted to add on Ben Black answer if someone ever need more control over the image moving around so you can't move the image past it's borders :
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Control c = sender as Control;
if (Dragging && c != null)
{
int maxX = pictureBox1.Size.Width * -1 + panel.Size.Width;
int maxY = pictureBox1.Size.Height * -1 + panel.Size.Height;
int newposLeft = e.X + c.Left - xPos;
int newposTop = e.Y + c.Top - yPos;
if (newposTop > 0)
{
newposTop = 0;
}
if (newposLeft > 0)
{
newposLeft = 0;
}
if (newposLeft < maxX)
{
newposLeft = maxX;
}
if (newposTop < maxY)
{
newposTop = maxY;
}
c.Top = newposTop;
c.Left = newposLeft;
}
}
I need to update scroll bar position when I click on image and move picturebox. It is always at the beggining, it only moving on the right side (horizontall) and down (vertical).
private void pictureBox1_MouseMove_1(object sender, MouseEventArgs e)
{
....
Point currentMousePos = e.Location;
int distanceX = currentMousePos.X - mouseX;
int distanceY = currentMousePos.Y - mouseY;
int newX = pictureBox1.Location.X + distanceX;
int newY = pictureBox1.Location.Y + distanceY;
if (newX + pictureBox1.Image.Width + 10 < pictureBox1.Image.Width && pictureBox1.Image.Width + newX + 10 > panel1.Width)
{
pictureBox1.Location = new Point(newX, pictureBox1.Location.Y);
}
if (newY + pictureBox1.Image.Height + 10 < pictureBox1.Image.Height && pictureBox1.Image.Height + newY + 10 > panel1.Height)
{
pictureBox1.Location = new Point(pictureBox1.Location.X, newY);
}
}
I think you need to change the AutoScrollPosition of the parent panel and not play around with the Location points of the PictureBox. After all, the scroll bars of the parent panel are already taking care of the position of the PictureBox.
Try something like this (by the way, my code only does this when a button is pressed, otherwise, I think it would be a weird user interface design):
private Point _StartPoint;
void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left)
_StartPoint = e.Location;
}
void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left) {
Point changePoint = new Point(e.Location.X - _StartPoint.X,
e.Location.Y - _StartPoint.Y);
panel1.AutoScrollPosition = new Point(-panel1.AutoScrollPosition.X - changePoint.X,
-panel1.AutoScrollPosition.Y - changePoint.Y);
}
}
LarsTech's code isn't 100% correct. 2 notes:
Note that if slider is moved, then the same point on screen changes it's coordinates relative to pictureBox1 (as pictureBox moved with moved slider). Therefore we want to use the screen coordinates (Control.MousePosition instead of e.Location).
Changing panel1.AutoScrollPosition causes the move of pictureBox relative to mouseCursor, so the pictureBox1.MouseMove event is fired again, even if cursor didn't move on the screen. Adding _StartPoint = Control.MousePosition prevents unwanted scrolling.