WPF中如何实现Canvas拖拽及边界限制？附缩放代码问题

问题1：缩放时Canvas超出Border边界 #

要解决这个问题，你可以用ScrollViewer包裹Canvas——这样Canvas缩放后超出的部分会被ScrollViewer的滚动条接管，用户能通过滚动查看全部内容，同时Border会约束ScrollViewer的显示范围，不会出现内容越界的情况。修改后的XAML结构如下：

<Border Margin="10" BorderThickness="2" BorderBrush="Black">
    <ScrollViewer x:Name="scrollViewer" 
                  HorizontalScrollBarVisibility="Auto" 
                  VerticalScrollBarVisibility="Auto">
        <Canvas x:Name="mainCanvas" Background="Transparent" 
                MouseWheel="Canvas_MouseWheel"
                MouseDown="Canvas_MouseDown"
                MouseMove="Canvas_MouseMove"
                MouseUp="Canvas_MouseUp"
                MouseLeave="Canvas_MouseUp">
            <Canvas.RenderTransform>
                <MatrixTransform/>
            </Canvas.RenderTransform>
        </Canvas>
    </ScrollViewer>
</Border>

问题2：实现Canvas拖拽功能 #

通过处理鼠标的按下、移动、释放事件，记录拖拽状态和位置，调整Canvas的MatrixTransform就能实现平移拖拽。具体代码如下：

首先在后台添加几个变量：

private bool isDragging = false;
private Point lastMousePosition;
private double scaleFactor = 1.0; // 替换原有的int zoom，用浮点型保证缩放精度
private const double ScaleStep = 1.1;
private const double MinScale = 1.0;
private const double MaxScale = Math.Pow(1.1, 10); // 对应原逻辑的最大10级缩放

然后实现拖拽相关的事件处理：

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        isDragging = true;
        lastMousePosition = e.GetPosition(mainCanvas);
        mainCanvas.CaptureMouse(); // 捕获鼠标，防止移出Canvas后停止响应
    }
}

private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    if (isDragging && e.LeftButton == MouseButtonState.Pressed)
    {
        var currentPos = e.GetPosition(mainCanvas);
        var transform = (MatrixTransform)mainCanvas.RenderTransform;
        var matrix = transform.Matrix;

        // 计算鼠标移动的偏移量
        double deltaX = currentPos.X - lastMousePosition.X;
        double deltaY = currentPos.Y - lastMousePosition.Y;

        // 应用平移变换
        matrix.Translate(deltaX, deltaY);
        transform.Matrix = matrix;

        lastMousePosition = currentPos;
    }
}

private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
    isDragging = false;
    mainCanvas.ReleaseMouseCapture();
}

private void Canvas_MouseLeave(object sender, MouseEventArgs e)
{
    // 鼠标移出Canvas时停止拖拽
    isDragging = false;
    mainCanvas.ReleaseMouseCapture();
}

优化缩放逻辑（适配ScrollViewer+提升精度） #

原有的整数zoom变量容易导致缩放精度问题，这里替换为浮点型的scaleFactor，同时添加ScrollViewer位置更新逻辑，保证缩放时鼠标指向的内容不会偏移：

private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var element = (UIElement)sender;
    var mousePos = e.GetPosition(element);
    var transform = (MatrixTransform)element.RenderTransform;
    var matrix = transform.Matrix;

    double scale = e.Delta > 0 ? ScaleStep : 1 / ScaleStep;

    // 限制缩放范围，避免过度缩放
    if ((scaleFactor * scale < MinScale && e.Delta < 0) || 
        (scaleFactor * scale > MaxScale && e.Delta > 0))
        return;

    scaleFactor *= scale;

    // 以鼠标位置为中心进行缩放
    matrix.ScaleAtPrepend(scale, scale, mousePos.X, mousePos.Y);
    transform.Matrix = matrix;

    // 更新滚动位置，确保缩放后鼠标指向的内容保持在视野内
    UpdateScrollPosition(mousePos, scale);
}

private void UpdateScrollPosition(Point mousePos, double scale)
{
    // 计算缩放前鼠标在ScrollViewer中的绝对位置
    Point scrollOffset = new(scrollViewer.HorizontalOffset, scrollViewer.VerticalOffset);
    Point absoluteMousePos = new(mousePos.X + scrollOffset.X, mousePos.Y + scrollOffset.Y);

    // 计算缩放后的滚动偏移量
    double newHorizontalOffset = absoluteMousePos.X - mousePos.X * scale;
    double newVerticalOffset = absoluteMousePos.Y - mousePos.Y * scale;

    // 更新ScrollViewer的滚动位置
    scrollViewer.ScrollToHorizontalOffset(newHorizontalOffset);
    scrollViewer.ScrollToVerticalOffset(newVerticalOffset);
}

这样修改后：

• 缩放时Canvas不会超出Border，超出部分可通过滚动条查看
• 按住鼠标左键拖动即可平移地图（Canvas）
• 缩放逻辑更精准，且缩放时鼠标指向的内容会稳定保持在视野中，体验更流畅

内容的提问来源于stack exchange，提问作者mvper7