WPF 缩放画布中心鼠标位置 [英] WPF Zoom Canvas Center on Mouse Position

问题描述

<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>

参考点固定为 Left 和 Top 点以缩放 Canvas.我想放大和缩小鼠标指针.我如何使它成为 MVVM 模式?(不在代码后面).使用鼠标滚轮，我可以放大画布.我已经使用了 RenderTransformOrigin、CenterX、CenterY 但它不起作用.我想我采取了错误的方法.请帮帮我..

The reference point is fixed with Left and Top points to zoom the Canvas. I'd like to zoom in and zoom out on the mouse pointer. How do I make it into the MVVM Pattern? (Not Behind code). Using mouse wheel, I can zoom in canvas. I already use RenderTransformOrigin, CenterX, CenterY but it is not worked. I think I made a wrong approach. Please help me..

推荐答案

由于您没有提供当前的缩放代码，这里是缩放鼠标位置的通用示例:

Since you didn't provide your current zooming code, here is a generic example of zooming on the mouse position:

<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>

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

With code that updates the transformation matrix:

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

这篇关于WPF 缩放画布中心鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！