如何跟随鼠标移动缩放画布中的对象答案

【问题标题】：How to move an Object in a Zoomed Canvas following the mouse如何跟随鼠标移动缩放画布中的对象
【发布时间】：2020-04-26 08:15:31
【问题描述】：

我在 Scrollviewer 中有一个 Canvas（ZoomMode="true"）。在画布上有我可以用鼠标移动的网格

<ScrollViewer ZoomMode="Enabled"   HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Canvas x:Name="sala"  Width="3000" Height="3000">
        <Grid x:Name="tavolo1" Canvas.Left="200" Canvas.Top="200"  ManipulationDelta="UIElement_OnManipulationDelta" ManipulationMode="All" Width="100" Height="200" >
            <Grid.RenderTransform>
                <TranslateTransform/>
            </Grid.RenderTransform>
        </Grid>
    </Canvas>
</Scrollviewer>

允许此操作的代码隐藏函数是：

private void UIElement_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Grid stackDragged = (Grid) sender;
    (stackDragged.RenderTransform as TranslateTransform).X += e.Delta.Translation.X;
    (stackDragged.RenderTransform as TranslateTransform).Y += e.Delta.Translation.Y;
}

当我在不缩放的情况下移动网格时，网格在 Canvas 中的坐标变成了鼠标的坐标；但是当我使用缩放进行此操作时，网格的“平移”会随着缩放比例缩放，因此网格不会获取鼠标的真实坐标。

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

由于ManipulationDelta.Translation 是在屏幕坐标中测量的，因此您需要对其应用相对变换以获取 ScrollViewer 中 Grid 的实际平移增量。

    private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        var stackDragged = (Grid)sender;
        var transform = stackDragged.TransformToVisual(null).Inverse;

        var delta = transform.TransformPoint(e.Delta.Translation);
        var extra_offset = transform.TransformPoint(new Point());

        (stackDragged.RenderTransform as TranslateTransform).X += delta.X - extra_offset.X;
        (stackDragged.RenderTransform as TranslateTransform).Y += delta.Y - extra_offset.Y;

       // (stackDragged.RenderTransform as TranslateTransform).X += e.Delta.Translation.X;
       // (stackDragged.RenderTransform as TranslateTransform).Y += e.Delta.Translation.Y;

    }

【讨论】：