WPF缩放画布中心鼠标位置

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>

使用"左"和"顶"点固定参考点以缩放"画布".我想放大并缩小鼠标指针.如何使其成为MVVM模式？(不在代码后面).使用鼠标滚轮,我可以放大画布.我已经使用了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;
}

Answer 2

我把@ Grek40的代码转换成了一个Behavior试图坚持使用MVVM模式的人.如果你对此进行投票,请记住也要对他的答案进行投票,因为我的投票是基于他的工作.它需要System.Windows.Interactivity.WPF nuget包(或其他一些框架)作为Behavior基类.你可以将它应用于任何UIElement.它将自动MatrixTransform为您添加,因此您不必在XAML中执行此操作(它将覆盖任何现有的转换).

public class ZoomOnMouseWheel : Behavior<FrameworkElement>
{
    public Key? ModifierKey { get; set; } = null;
    public TransformMode TranformMode { get; set; } = TransformMode.Render;

    private Transform _transform;

    protected override void OnAttached()
    {
        if (TranformMode == TransformMode.Render)
        {
            _transform = AssociatedObject.RenderTransform = new MatrixTransform();
        }
        else
        {
            _transform = AssociatedObject.LayoutTransform = new MatrixTransform();
        }

        AssociatedObject.MouseWheel += AssociatedObject_MouseWheel;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.MouseWheel -= AssociatedObject_MouseWheel;
    }

    private void AssociatedObject_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if ((!ModifierKey.HasValue || !Keyboard.IsKeyDown(ModifierKey.Value)) && ModifierKey.HasValue)
        {
            return;
        }

        if (!(_transform is MatrixTransform transform))
        {
            return;
        }

        var pos1 = e.GetPosition(AssociatedObject);
        var scale = e.Delta > 0 ? 1.1 : 1 / 1.1;
        var mat = transform.Matrix;
        mat.ScaleAt(scale, scale, pos1.X, pos1.Y);
        transform.Matrix = mat;
        e.Handled = true;
    }
}

public enum TransformMode
{
    Layout,
    Render,
}

你可以像这样使用它:

<Grid>
    <interactivity:Interaction.Behaviors>
        <behaviors:ZoomOnMouseWheel />
    </interactivity:Interaction.Behaviors>
    <!--Your grid content here-->
</Grid>

别忘了xmlns:

xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"