WPF绘制线条超出Canvas边界问题求助

在WPF中绘制线条时，会出现线条超出Canvas边界的情况，仅在鼠标左键按下且此前光标曾悬停在Canvas上时触发。

相关代码 #

C#代码 #

ArrayPoints arrayPoints = new ArrayPoints(2);
private void Canvas_mouse_move(object sender, MouseEventArgs e)
{
    if(e.MouseDevice.LeftButton == MouseButtonState.Pressed)
    {
        arrayPoints.SetPoints(new Point(e.GetPosition(Canvas).X, e.GetPosition(Canvas).Y));
        if (arrayPoints.GetIndex() >= 2)
        {
            Canvas.Children.Add(new Line
            {
                X1 = arrayPoints.GetPoints()[0].X,
                Y1 = arrayPoints.GetPoints()[0].Y,
                X2 = arrayPoints.GetPoints()[1].X,
                Y2 = arrayPoints.GetPoints()[1].Y,
                StrokeStartLineCap = PenLineCap.Round,
                StrokeEndLineCap = PenLineCap.Round,
                StrokeThickness = 10,
                Stroke = Brushes.Red
            });
            arrayPoints.SetPoints(new Point(e.GetPosition(Canvas).X, e.GetPosition(Canvas).Y));
        }
    }
}

private void Canvas_left_button_up(object sender, MouseButtonEventArgs e)
{
    arrayPoints.ResetPoints();
}

XAML代码 #

<Window x:Class="Paint.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Paint"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid Background="#404040">
    <Canvas x:Name="Canvas" Background ="White" Margin="30" MouseMove="Canvas_mouse_move" MouseLeftButtonUp="Canvas_left_button_up" MouseLeave="Canvas_mouse_leave"/>
</Grid>

问题原因 #

1. 线帽与线条粗细导致的超出：设置的StrokeThickness=10加上PenLineCap.Round，会让线条的两端向外延伸5个单位（StrokeThickness的一半），当绘制的端点靠近Canvas边缘时，延伸部分就会超出Canvas边界。
2. 未对坐标进行边界限制：当前代码直接使用鼠标获取的坐标绘制线条，没有判断坐标是否在Canvas的有效绘制范围内，当鼠标靠近边缘时，线条自然会超出。

解决方案 #

方案1：强制Canvas裁剪超出内容 #

最简单的方法是给Canvas添加ClipToBounds="True"属性，让Canvas自动裁剪所有超出自身边界的内容：

<Canvas x:Name="Canvas" Background ="White" Margin="30" ClipToBounds="True" MouseMove="Canvas_mouse_move" MouseLeftButtonUp="Canvas_left_button_up" MouseLeave="Canvas_mouse_leave"/>

方案2：限制绘制坐标范围 #

在获取鼠标坐标后，对坐标进行边界处理，确保线条的端点加上线帽延伸后不会超出Canvas：
修改C#中的鼠标移动事件代码：

private void Canvas_mouse_move(object sender, MouseEventArgs e)
{
    if(e.MouseDevice.LeftButton == MouseButtonState.Pressed)
    {
        // 计算有效边界（考虑StrokeThickness的一半）
        double halfThickness = 5; // 对应StrokeThickness=10
        double minX = halfThickness;
        double maxX = Canvas.ActualWidth - halfThickness;
        double minY = halfThickness;
        double maxY = Canvas.ActualHeight - halfThickness;

        Point rawPoint = e.GetPosition(Canvas);
        // 裁剪坐标到有效范围
        Point clippedPoint = new Point(
            Math.Clamp(rawPoint.X, minX, maxX),
            Math.Clamp(rawPoint.Y, minY, maxY)
        );

        arrayPoints.SetPoints(clippedPoint);
        if (arrayPoints.GetIndex() >= 2)
        {
            Canvas.Children.Add(new Line
            {
                X1 = arrayPoints.GetPoints()[0].X,
                Y1 = arrayPoints.GetPoints()[0].Y,
                X2 = arrayPoints.GetPoints()[1].X,
                Y2 = arrayPoints.GetPoints()[1].Y,
                StrokeStartLineCap = PenLineCap.Round,
                StrokeEndLineCap = PenLineCap.Round,
                StrokeThickness = 10,
                Stroke = Brushes.Red
            });
            arrayPoints.SetPoints(clippedPoint);
        }
    }
}

方案3：两种方式结合 #

同时使用ClipToBounds="True"和坐标裁剪，可以更稳妥地避免线条超出边界的问题。

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