将图像移至 windows 商店应用中的 canvas

Question

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

XAML

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

C#

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

Answer 1

而不是使用TranslateTransform，你应该直接在canvas中设置绝对位置，所以你必须将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.

将图像移至 windows 商店应用中的 canvas

Move an image over a canvas in windows store app

c#

xaml

canvas

windows-store-apps