将画布缩放到鼠标位置

Question

我正在尝试使用鼠标滚轮为画布实现缩放功能.目前我只是使用CenterX ="0.5"和CenterY ="0.5"缩放到画布的中心位置.我想改变行为,以便在鼠标位置进行缩放,我想知道是否可以使用ScaleTransform.

目前我使用以下代码:

<Canvas Width="500" Height="500">
    <Canvas.LayoutTransform>
        <ScaleTransform CenterX="0.5" CenterY="0.5"
                                ScaleX="{Binding Zoom}"
                                ScaleY="{Binding Zoom}" />
    </Canvas.LayoutTransform>
</Canvas>

Answer 1

在特定位置缩放Canvas(或任何其他UIElement)的一种非常基本的方法是使用MatrixTransform作为RenderTransform属性

<Canvas Width="500" Height="500" MouseWheel="Canvas_MouseWheel">
    <Canvas.RenderTransform>
        <MatrixTransform/>
    </Canvas.RenderTransform>
</Canvas>

并Matrix在此MouseWheel处理程序中更新转换的属性:

private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var element = sender as UIElement;
    var position = e.GetPosition(element);
    var transform = element.RenderTransform as MatrixTransform;
    var matrix = transform.Matrix;
    var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1); // choose appropriate scaling factor

    matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
    transform.Matrix = matrix;
}