如何在图片上方的Canvas中正确缩放点的X、Y坐标

核心错误点 #

1. 使用DesiredSize计算缩放比例错误：WPF控件的DesiredSize是布局过程中计算出的期望尺寸，不等于控件最终渲染的实际尺寸，应该使用ActualWidth和ActualHeight作为视图层图片的实际显示尺寸。
2. 未考虑图片Stretch模式带来的偏移：如果StashImage的Stretch属性设置为Uniform/UniformToFill等非None值，图片会按比例缩放后居中显示，此时除了缩放比例，还需要计算留白带来的坐标偏移量，不能直接用坐标乘缩放比例。
3. 标记尺寸未同步缩放：你当前固定标记为10*10的矩形，未根据缩放比例调整标记大小，也会导致标记位置看起来偏离匹配区域。
4. 整数除法精度丢失：如果StashImage.Source.Width/Height是整数类型，直接做除法可能会触发整数除法得到错误的缩放比例，需要先转成浮点数再计算。

修正后的squares方法代码 #

private void squares(List<System.Drawing.Point> points)
{
    Cnv.Children.Clear();
    // 先获取图片实际渲染尺寸
    double renderWidth = StashImage.ActualWidth;
    double renderHeight = StashImage.ActualHeight;
    // 获取原图尺寸
    double originalWidth = StashImage.Source.Width;
    double originalHeight = StashImage.Source.Height;

    Cnv.Width = renderWidth;
    Cnv.Height = renderHeight;

    // 计算缩放比例，转浮点数避免整数除法
    double widthScale = renderWidth / originalWidth;
    double heightScale = renderHeight / originalHeight;

    // 处理Uniform/UniformToFill等Stretch模式的偏移（如果你的Stretch是None可跳过这段）
    double scale = Math.Min(widthScale, heightScale); // Uniform模式用最小比例
    double offsetX = (renderWidth - originalWidth * scale) / 2;
    double offsetY = (renderHeight - originalHeight * scale) / 2;

    // 模板图实际尺寸，用于调整标记大小，替换为你实际的模板图宽高即可
    int templateWidth = 40; 
    int templateHeight = 40;

    foreach (var point in points)
    {
        Rectangle rect = new Rectangle();
        // 标记大小按缩放比例同步调整
        rect.Width = templateWidth * scale;
        rect.Height = templateHeight * scale;
        rect.StrokeThickness = 1;
        rect.Fill = Brushes.Sienna;                
        Cnv.Children.Add(rect);

        // 坐标计算加上偏移量
        Canvas.SetLeft(rect, offsetX + point.X * scale);
        Canvas.SetTop(rect, offsetY + point.Y * scale);
    }
}

额外验证点 #

• 确认StashImage的Stretch属性和你计算偏移的逻辑匹配，如果是Fill模式就不需要偏移，直接用原始的widthScale和heightScale分别缩放X、Y坐标即可。
• 模板匹配返回的坐标是原图左上角坐标，确保你计算标记大小的时候用的是模板图的实际尺寸，避免标记大小和匹配区域不匹配。

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