c# - WPF缩放 Canvas 在鼠标位置上居中

Question

<utils:ScrollViewer x:Name="ImageViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="2"                                                                   
                                       CurrentHorizontalOffset="{Binding ScrollHorizontalValue, Mode=TwoWay}"
                                       CurrentVerticalOffset="{Binding ScrollVerticalValue, Mode=TwoWay}"                                        
                                       >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="PreviewMouseWheel">
                            <cmd:EventToCommand Command="{Binding MouseWheelZoomCommand}" PassEventArgsToCommand="True"/>
                        </i:EventTrigger>
                        <i:EventTrigger EventName="ScrollChanged">
                            <cmd:EventToCommand Command="{Binding ScrollChangedCommand}" PassEventArgsToCommand="True"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <Grid Background="{StaticResource ThatchBackground}" RenderTransformOrigin="0.5,0.5">
                        <ItemsControl ItemsSource="{Binding CanvasItems}" ItemTemplate="{StaticResource templateOfROI}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Canvas x:Name="BackPanel"
                                        Width="{Binding DataContext.ImageWidth, ElementName=MainGrid}" 
                                        Height="{Binding DataContext.ImageHeight, ElementName=MainGrid}"
                                        ClipToBounds="True">
                                        <Canvas.Background>
                                            <ImageBrush x:Name="BackImage"
                                                        ImageSource="{Binding DataContext.SelectedImage.Path, ElementName=MainGrid}"/>
                                        </Canvas.Background>

                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="MouseRightButtonDown">
                                                <cmd:EventToCommand Command="{Binding DataContext.MouseRightCommand, ElementName=MainGrid}"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                                <cmd:EventToCommand Command="{Binding DataContext.MouseMoveStartCommand, ElementName=MainGrid}" PassEventArgsToCommand="True"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="MouseMove">
                                                <cmd:EventToCommand Command="{Binding DataContext.MouseMovingCommand, ElementName=MainGrid}" PassEventArgsToCommand="True"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="MouseRightButtonUp">
                                                <cmd:EventToCommand Command="{Binding DataContext.MouseMoveEndCommand, ElementName=MainGrid}"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="MouseLeave">
                                                <cmd:EventToCommand Command="{Binding DataContext.MouseLeaveCommand, ElementName=MainGrid}"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>

                                        <Canvas.LayoutTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="{Binding ScaleX}"
                                                                ScaleY="{Binding ScaleY}">
                                                </ScaleTransform>
                                        </TransformGroup>
                                    </Canvas.LayoutTransform>
                                </Canvas>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </Grid>
            </utils:ScrollViewer>

引用点通过“左”和“上”点固定以缩放 Canvas 。我想放大和缩小鼠标指针。如何将其纳入MVVM模式？ (不隐藏代码)。使用鼠标滚轮，可以放大 Canvas 。我已经使用了RenderTransformOrigin，CenterX，CenterY，但是它不起作用。我认为我做错了方法。请帮我..

Answer 1

由于您未提供当前的缩放代码，因此以下是缩放鼠标位置的一般示例:

<Grid x:Name="grid1" Background="White" MouseWheel="Grid_MouseWheel">
    <Grid x:Name="grid2">
        <Grid.RenderTransform>
            <MatrixTransform/>
        </Grid.RenderTransform>
        <Rectangle Width="20" Height="20" Margin="20" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="Green"/>
    </Grid>
</Grid>

使用更新转换矩阵的代码:

private void Grid_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var matTrans = grid2.RenderTransform as MatrixTransform;
    var pos1 = e.GetPosition(grid1);

    var scale = e.Delta > 0 ? 1.1 : 1 / 1.1;

    var mat = matTrans.Matrix;
    mat.ScaleAt(scale, scale, pos1.X, pos1.Y);
    matTrans.Matrix = mat;
    e.Handled = true;
}