如何让WPF中Canvas与底层Image实现精准对齐？

我的应用会检测实时摄像头图像中的异物（Blob、簇等），并在图像上方显示物体轮廓。我使用了Image和Canvas元素，XAML代码如下：

<Border x:Name="ViewportBorder" Grid.Column="0" Grid.Row="1" BorderThickness="3" Background="AliceBlue" BorderBrush="Red">
    <Grid>
        <Image x:Name="videoPlayer" Stretch="Uniform" MouseDown="videoPlayer_MouseDown"></Image>
        <Canvas x:Name="ObjectsCanvas"></Canvas>
    </Grid>
</Border>

上述XAML中的Border仅用于在包含videoPlayer和ObjectsCanvas的Grid周围绘制红色粗边框。设置Stretch="Uniform"是为了窗口最大化时拉伸图像同时保持宽高比。

每当摄像头传来新帧时，videoPlayer.Source会更新为该帧的位图，Blob检测方法会生成绘制Polyline的坐标列表，随后将Polyline对象添加到ObjectsCanvas以显示在图像帧上方。

绘制Blob并添加到ObjectsCanvas.Children的代码如下：

private void DrawBlob(List<Point> corners)
{
    this.Dispatcher.Invoke(() =>
    {
        var myPolyline = new Polyline();
        myPolyline.Stroke = System.Windows.Media.Brushes.Yellow;
        myPolyline.StrokeThickness = 4;
        myPolyline.FillRule = FillRule.EvenOdd;
        myPolyline.Points = corners;

        Canvas.SetLeft(myPolyline, 0);
        Canvas.SetTop(myPolyline, 0);

        ObjectsCanvas.Children.Clear(); // 移除旧的Blob轮廓线
        ObjectsCanvas.Children.Add(myPolyline); // 添加新的轮廓线
    });
}

运行应用时，黄色粗Polyline绘制的Blob轮廓未能与图像中的异物完美重叠，出现右移偏移。经验证，该偏移并非Blob检测算法导致——我曾用传统GDI方法在实际位图上绘制相同坐标的Polyline，结果显示正常。

当窗口最大化（videoPlayer被拉伸）时，偏移问题会变得更严重。我尝试将ObjectsCanvas的HorizontalAlignment和VerticalAlignment设为Stretch，但没有效果。

请问是否有方法能让Canvas与实际显示的图像区域完全对齐？我可以退回到GDI绘制，但总觉得在WPF中这样做不太合适……

解决方案 #

问题核心是：Image设置Stretch="Uniform"后，实际显示的图像会在控件内部居中（上下或左右留白），但Canvas铺满整个Grid，且Polyline坐标基于原始图像尺寸计算，未考虑图像拉伸后的缩放比例和偏移。

步骤1：计算图像的实际渲染信息 #

添加方法获取Image控件中图像的缩放比例、实际显示尺寸和偏移：

private (Rect imageRenderRect, double scale) GetImageRenderInfo()
{
    if (videoPlayer.Source is not BitmapSource bitmapSource) 
        return (Rect.Empty, 1);

    double imageWidth = bitmapSource.PixelWidth;
    double imageHeight = bitmapSource.PixelHeight;
    double controlWidth = videoPlayer.ActualWidth;
    double controlHeight = videoPlayer.ActualHeight;

    // 计算Uniform拉伸的缩放比例
    double scale = Math.Min(controlWidth / imageWidth, controlHeight / imageHeight);
    // 计算渲染图像的尺寸
    double renderWidth = imageWidth * scale;
    double renderHeight = imageHeight * scale;
    // 计算图像在控件中的居中偏移
    double offsetX = (controlWidth - renderWidth) / 2;
    double offsetY = (controlHeight - renderHeight) / 2;

    return (new Rect(offsetX, offsetY, renderWidth, renderHeight), scale);
}

步骤2：转换Blob坐标并绘制 #

修改DrawBlob方法，将原始坐标转换为适配Canvas的坐标：

// 保存最新的Blob坐标，用于窗口尺寸变化时重绘
private List<Point> _latestBlobCorners;

private void DrawBlob(List<Point> corners)
{
    _latestBlobCorners = corners;
    this.Dispatcher.Invoke(() =>
    {
        var (renderRect, scale) = GetImageRenderInfo();
        if (renderRect == Rect.Empty) return;

        // 转换原始坐标到Canvas的坐标系统
        var transformedPoints = corners.Select(p => new Point(
            renderRect.X + p.X * scale,
            renderRect.Y + p.Y * scale
        )).ToList();

        var myPolyline = new Polyline();
        myPolyline.Stroke = Brushes.Yellow;
        myPolyline.StrokeThickness = 4;
        myPolyline.FillRule = FillRule.EvenOdd;
        myPolyline.Points = new PointCollection(transformedPoints);

        ObjectsCanvas.Children.Clear();
        ObjectsCanvas.Children.Add(myPolyline);
    });
}

步骤3：监听控件尺寸变化重绘 #

在XAML中给Image添加SizeChanged事件：

<Image x:Name="videoPlayer" Stretch="Uniform" MouseDown="videoPlayer_MouseDown" SizeChanged="videoPlayer_SizeChanged"></Image>

实现事件处理方法：

private void videoPlayer_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_latestBlobCorners?.Any() ?? false)
    {
        DrawBlob(_latestBlobCorners);
    }
}

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