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>
参考点由左"和顶"点固定,以缩放画布.我想放大和缩小鼠标指针.如何将其纳入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屋!