[英]Drag and drop images on canvas
I have drag and drop the images on canvas. 我已将图像拖放到画布上。 I have fix the boundaries so that my images not drag out of canvas,but when I zoom-in and zoom-out the images then its boundaries changes,and it would not drag over whole canvas.I have try this till now.
我已经修复了边界,以便我的图像不会从画布上拖出,但是当我放大和缩小图像时,其边界会改变,并且不会拖到整个画布上。
public void Btnedit_Click(object sender, RoutedEventArgs e)
{
var button = sender as Button;
button.IsEnabled = false;
CompositeTransform CT = new CompositeTransform();
ImgeracOpen.ManipulationMode = ManipulationModes.All;
//ImgeracOpen.ManipulationDelta += Drag_ManipulationDelta;
ImgeracOpen.ManipulationDelta += Composite_ManipulationDelta;
ImgeracOpen.RenderTransform = CT;
}
void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
// scale the image
FrameworkElement Elem = sender as FrameworkElement;
CompositeTransform CT = Elem.RenderTransform as CompositeTransform;
if (CT != null)
{
CT.ScaleX *= e.Delta.Scale;
CT.ScaleY *= e.Delta.Scale;
CT.CenterX = Elem.ActualWidth / 2;
CT.CenterY = Elem.ActualHeight / 2;
if (CT.ScaleX < 0.25) CT.ScaleX = 0.25;
if (CT.ScaleY < 0.25) CT.ScaleY = 0.25;
if (CT.ScaleX > 1.15) CT.ScaleX = 1.15;
if (CT.ScaleY > 1.15) CT.ScaleY = 1.15;
}
double Left = Canvas.GetLeft(Elem);
double Top = Canvas.GetTop(Elem);
Left += e.Delta.Translation.X;//Get x cordinate
Top += e.Delta.Translation.Y;//Get y cordinate
//check for bounds
if (Left < 0)
{
Left = 0;
}
else if (Left > (my_canvas.ActualWidth - Elem.ActualWidth))
{
Left = my_canvas.ActualWidth - Elem.ActualWidth;
}
if (Top < 0)
{
Top = 0;
}
else if (Top > (my_canvas.ActualHeight - Elem.ActualHeight))
{
Top = my_canvas.ActualHeight - Elem.ActualHeight;
}
Canvas.SetLeft(Elem, Left);
Canvas.SetTop(Elem, Top);
thanks in advance 提前致谢
when I zoom-in and zoom-out the images then its boundaries changes,and it would not drag over whole canvas.
当我放大和缩小图像时,其边界会发生变化,并且不会在整个画布上拖动。
It's because when you scale the Image, the Image's ActualWidth
and ActualHeight
won't change and so is Left
and Top
that you get from Canvas.GetLeft
and Canvas.GetTop
. 这是因为缩放图像时,图像的
ActualWidth
和ActualHeight
不会更改,因此从Canvas.GetLeft
和Canvas.GetTop
获得的Left
和Top
也是Canvas.GetTop
。
To fix the problem, you need to calucate the Left
and Top
values when the image scales like below: 要解决此问题,当图像缩放时,需要计算“
Left
和“ Top
值,如下所示:
As you can see in the picture. 如您在图片中看到的。 When image scales, the
Left
Value should be Canvas.Width
- Image.ActualWidth
- xOffset
when image hit the right boundary. 缩放图像时,当图像到达右边界时,“
Left
值”应为Canvas.Width
- Image.ActualWidth
- xOffset
。 And when it hit the left boundary Left
should be equal to xOffset
. 当到达左边界时,
Left
应该等于xOffset
。
Through this logic, the codes in Composite_ManipulationDelta
should be modified like below: 通过这种逻辑,
Composite_ManipulationDelta
的代码应进行如下修改:
void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
// scale the image
FrameworkElement Elem = sender as FrameworkElement;
CompositeTransform CT = Elem.RenderTransform as CompositeTransform;
if (CT != null)
{
CT.ScaleX *= e.Delta.Scale;
CT.ScaleY *= e.Delta.Scale;
CT.CenterX = Elem.ActualWidth / 2;
CT.CenterY = Elem.ActualHeight / 2;
//if (CT.ScaleX < 0.25) CT.ScaleX = 0.25;
//if (CT.ScaleY < 0.25) CT.ScaleY = 0.25;
//if (CT.ScaleX > 1.15) CT.ScaleX = 1.15;
//if (CT.ScaleY > 1.15) CT.ScaleY = 1.15;
}
double Left = Canvas.GetLeft(Elem);
double Top = Canvas.GetTop(Elem);
//output.Text = "Left:=" + Left + " Top:=" + Top+"\nActualWidth:="+Elem.Width+" ActualHeight"+Elem.Height;
Left += e.Delta.Translation.X;//Get x cordinate
Top += e.Delta.Translation.Y;//Get y cordinate
//check for bounds
double xOffset = Elem.ActualWidth * (CT.ScaleX-1) / 2;
double yOffset = Elem.ActualHeight * (CT.ScaleY-1) / 2;
if (Left-xOffset < 0)
{
Left = xOffset;
}
else if (Left > (my_canvas.ActualWidth - Elem.ActualWidth-xOffset))
{
Left = my_canvas.ActualWidth - Elem.ActualWidth-xOffset;
}
if (Top -yOffset<0 )
{
Top = yOffset;
}
else if (Top > (my_canvas.ActualHeight - Elem.ActualHeight-yOffset))
{
Top = my_canvas.ActualHeight - Elem.ActualHeight-yOffset;
}
Canvas.SetLeft(Elem, Left);
Canvas.SetTop(Elem, Top);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.