WPF中Canvas上PathGeometry与Thumb控件缩放不一致问题求助

一、核心问题拆解 #

你的问题根源有三个：

• Path设置了固定Height="450"、Width="800"，加上Stretch="Fill"和硬编码的ScaleTransform，导致Path的坐标空间和Canvas实际尺寸完全脱节，而Thumb是基于Canvas实际尺寸定位的，自然错位。
• 顶点计算逻辑不一致：比如LeftThumb的顶点用X + LeftThumb.Width，RightThumb却用X + ThumbRadius，直接导致位置偏差。
• 初始化时边角坐标计算错误，让Path初始位置就和Thumb不匹配。

二、分步解决方法 #

1. 重置Path的尺寸与缩放设置 #

直接移除Path的固定尺寸和硬编码缩放，让Path的坐标空间完全对应Canvas的像素空间：

<Path Stroke="Black" StrokeThickness="1" Stretch="None">
    <!-- 保留Fill和Data部分不变 -->
</Path>

• 用Stretch="None"确保PathGeometry的坐标直接映射到Canvas，不会被自动拉伸变形。

2. 统一顶点与Thumb的位置计算 #

所有Thumb的顶点都应该是其左上角坐标加上ThumbRadius（因为Thumb宽高都是20，中心就是X+10、Y+10），修正所有DragDelta方法中的顶点计算：

// LeftThumb_DragDelta示例
private void LeftThumb_DragDelta(object sender, DragDeltaEventArgs e)
{
    double X = Canvas.GetLeft(LeftThumb) + e.HorizontalChange;
    double Y = Canvas.GetTop(LeftThumb) + e.VerticalChange;

    // 限制Thumb不超出Canvas范围
    X = Math.Clamp(X, 0, MyCanvas.ActualWidth - LeftThumb.Width);
    Y = Math.Clamp(Y, 0, MyCanvas.ActualHeight - LeftThumb.Height);

    Canvas.SetLeft(LeftThumb, X);
    Canvas.SetTop(LeftThumb, Y);

    // 统一用ThumbRadius计算顶点位置
    LeftVertex = new Point(X + ThumbRadius, Y + ThumbRadius);
    NotifyPropertyChanged("LeftVertex");
}

MiddleThumb和RightThumb的DragDelta方法做同样修改，把顶点计算统一成X + ThumbRadius和Y + ThumbRadius。

3. 修正初始化逻辑 #

让Path的边角坐标直接对应Canvas的实际边角，同时确保Thumb初始位置正好覆盖顶点：

private void InitializeVertices()
{
    // 底部边角直接绑定Canvas实际尺寸
    BottomLeftCorner = new Point(0, MyCanvas.ActualHeight);
    NotifyPropertyChanged("BottomLeftCorner");

    BottomRightCorner = new Point(MyCanvas.ActualWidth, MyCanvas.ActualHeight);
    NotifyPropertyChanged("BottomRightCorner");

    // 初始化顶点
    RightVertex = new Point(MyCanvas.ActualWidth - ThumbRadius, ThumbRadius);
    NotifyPropertyChanged("RightVertex");

    LeftVertex = BottomLeftCorner;
    NotifyPropertyChanged("LeftVertex");

    MiddleVertex = new Point(MyCanvas.ActualWidth * 0.5, MyCanvas.ActualHeight * 0.5);
    NotifyPropertyChanged("MiddleVertex");

    // Thumb位置以顶点为中心偏移
    Canvas.SetLeft(LeftThumb, LeftVertex.X - ThumbRadius);
    Canvas.SetTop(LeftThumb, LeftVertex.Y - ThumbRadius);

    Canvas.SetLeft(RightThumb, RightVertex.X - ThumbRadius);
    Canvas.SetTop(RightThumb, RightVertex.Y - ThumbRadius);

    Canvas.SetLeft(MiddleThumb, MiddleVertex.X - ThumbRadius);
    Canvas.SetTop(MiddleThumb, MiddleVertex.Y - ThumbRadius);
}

4. 优化SizeChanged事件 #

只需要保持底部边角和Canvas尺寸同步即可，不需要额外处理缩放：

private void MyCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    BottomLeftCorner = new Point(0, MyCanvas.ActualHeight);
    NotifyPropertyChanged("BottomLeftCorner");

    BottomRightCorner = new Point(MyCanvas.ActualWidth, MyCanvas.ActualHeight);
    NotifyPropertyChanged("BottomRightCorner");
}

三、修改后效果 #

• Path的坐标空间完全和Canvas对齐，不需要再手动计算缩放比例。
• 三个Thumb会精准对应Path的顶点和中点，拖动时完全同步。
• 窗口尺寸变化时，Path和Thumb会自动适配Canvas的新尺寸。

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