在 Windows 商店应用程序中的画布上移动图像答案

【问题标题】：Move an image over a canvas in windows store app在 Windows 商店应用程序中的画布上移动图像
【发布时间】：2015-04-09 08:41:41
【问题描述】：

我需要通过点击和滑动将图像移动到画布上。我怎样才能做到这一点。我尝试了以下。图像在移动，但不是随着用户移动。

XAML

<Canvas Background="White">
     <Image Name="img" Width="200" Height="200" Source="Assets/11.png" ManipulationMode="All"  ManipulationStarted="img_ManipulationStarted" ManipulationDelta="img_ManipulationDelta"/>
</Canvas>

private Point initialPt;
private void img_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    initialPt = e.Position;
}

private void img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Point currentPt = e.Position;
    double x = currentPt.X - initialPt.X;
    double y = currentPt.Y - initialPt.Y;
    if (x != 0 || y != 0)
    {
        TranslateTransform posTransform = new TranslateTransform();
        posTransform.X = currentPt.X;
        posTransform.Y = currentPt.Y;
        img.RenderTransform = posTransform;
        e.Complete();
    }
}

【问题讨论】：

e.Position 相对于 Image 控件，但您希望相对于 Canvas 计算移动。您应该将事件处理程序附加到 Canvas 而不是 Image。
看看这个post 来移动和缩放图像。它很旧，但应该仍然可以工作
以下问题将提供更准确的方法：stackoverflow.com/questions/27942691/…

标签： c# xaml canvas windows-store-apps

【解决方案1】：

不要使用TranslateTransform，而应该直接在画布中设置绝对位置，因此必须将ManipulationDelta事件绑定到Canvas，并检测撞击点是否在图像内部。

<Canvas Background="White" ManipulationMode="All"  ManipulationDelta="canvas_ManipulationDelta">
     <Image Name="img" Width="200" Height="200" Source="Assets/11.png"/>
</Canvas>

这是新的事件处理函数：

   private void canvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
   {
        if ((e.Position.X > Canvas.GetLeft(img) && e.Position.X < Canvas.GetLeft(img) + img.Width) 
           || (e.Position.Y > Canvas.GetTop(img) && e.Position.Y < Canvas.GetTop(img) + img.Height)) {        
        { 
             Canvas.SetLeft(img, e.Position.X);
             Canvas.SetTop(img, e.Position.Y);
        }
   }

简单得像馅饼。您可以删除initialPt 和img_ManipulationStarted。

【讨论】：

当然，但是e.Position 是相对于图像，而不是画布。所以这不是那么简单。 OP 还必须将事件处理程序从 Image 移动到 Canvas。
呃，这部分我忘了。已编辑