.NET MAUI（Windows）：如何根据图片缩放计算标记像素位置？

核心问题是当你缩放Image控件时，由于AspectFit的布局规则和控件缩放的叠加，地图图片的实际显示位置会产生偏移，导致直接按比例计算地标位置失效。以下是具体的解决方案：

步骤1：获取地图原始像素尺寸 #

首先需要预存地图图片的原始宽高，这是计算缩放比例和偏移的基础：

private double _originalMapWidth;
private double _originalMapHeight;

protected override void OnAppearing()
{
    base.OnAppearing();
    LoadMapOriginalSize();
}

private void LoadMapOriginalSize()
{
    if (_imageMap.Source is not IImageSource imageSource) return;
    
    using var stream = imageSource.GetStreamAsync().Result;
    var bitmap = SKBitmap.Decode(stream);
    _originalMapWidth = bitmap.Width;
    _originalMapHeight = bitmap.Height;
}

步骤2：计算地图实际显示的偏移和缩放比例 #

编写方法计算地图在Grid容器中的实际偏移量和总缩放比例，这里会考虑AspectFit规则和Image.Scale属性：

private (double offsetX, double offsetY, double scale) GetMapDisplayParams()
{
    var containerWidth = _gridContents.Width;
    var containerHeight = _gridContents.Height;

    if (_originalMapWidth == 0 || _originalMapHeight == 0 || containerWidth == 0 || containerHeight == 0)
        return (0, 0, 1);

    // 计算AspectFit的基础缩放比例
    double mapAspect = _originalMapWidth / _originalMapHeight;
    double containerAspect = containerWidth / containerHeight;

    double baseScale = mapAspect > containerAspect 
        ? containerWidth / _originalMapWidth 
        : containerHeight / _originalMapHeight;

    // 叠加Image控件的缩放比例
    double totalScale = baseScale * _imageMap.Scale;

    // 计算地图实际显示尺寸
    double actualMapWidth = _originalMapWidth * totalScale;
    double actualMapHeight = _originalMapHeight * totalScale;

    // 根据布局对齐方式计算偏移量（适配Start/Center/End）
    double offsetX = 0;
    double offsetY = 0;

    if (_imageMap.HorizontalOptions.Alignment == LayoutAlignment.Center)
        offsetX = (containerWidth - actualMapWidth) / 2;
    else if (_imageMap.HorizontalOptions.Alignment == LayoutAlignment.End)
        offsetX = containerWidth - actualMapWidth;

    if (_imageMap.VerticalOptions.Alignment == LayoutAlignment.Center)
        offsetY = (containerHeight - actualMapHeight) / 2;
    else if (_imageMap.VerticalOptions.Alignment == LayoutAlignment.End)
        offsetY = containerHeight - actualMapHeight;

    return (offsetX, offsetY, totalScale);
}

步骤3：重新计算地标绘制位置 #

在自定义绘制逻辑中，使用上面的参数计算地标实际绘制坐标，保持圆的半径不变：

// 原始地标位置示例：(50,50)
var (offsetX, offsetY, scale) = GetMapDisplayParams();
double drawX = offsetX + 50 * scale;
double drawY = offsetY + 50 * scale;

canvas.FillColor = Colors.Blue;
canvas.FillCircle(drawX, drawY, 5); // 半径固定为5，不随缩放变化

步骤4：监听布局变化触发重绘 #

当Grid容器大小变化（比如窗口调整）或Image缩放时，需要触发GraphicsView重绘：

// 在页面构造函数中添加监听
public YourPage()
{
    InitializeComponent();
    _gridContents.SizeChanged += (s, e) => _graphicsViewRoute.Invalidate();
}

// 缩放按钮点击事件示例
private void OnZoomInClicked(object sender, EventArgs e)
{
    _imageMap.Scale *= 1.1;
    _graphicsViewRoute.Invalidate();
}

更优替代方案：统一用GraphicsView绘制地图和地标 #

如果不想处理Image控件的布局偏移问题，可以直接将地图图片和地标都绘制在GraphicsView中，这样能更灵活地控制缩放逻辑：

public class MapDrawable : IDrawable
{
    public SKBitmap MapBitmap { get; set; }
    public double Scale { get; set; } = 1;
    public Point Offset { get; set; } = Point.Zero;
    public List<Point> Landmarks { get; set; } = new();

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        // 绘制缩放后的地图
        if (MapBitmap != null)
        {
            canvas.DrawImage(MapBitmap, 
                (float)(Offset.X), 
                (float)(Offset.Y), 
                (float)(MapBitmap.Width * Scale), 
                (float)(MapBitmap.Height * Scale));
        }

        // 绘制固定大小的地标
        canvas.FillColor = Colors.Blue;
        foreach (var landmark in Landmarks)
        {
            double drawX = Offset.X + landmark.X * Scale;
            double drawY = Offset.Y + landmark.Y * Scale;
            canvas.FillCircle(drawX, drawY, 5);
        }
    }
}

这种方式不需要依赖Image控件，所有缩放和偏移逻辑都由自己控制，完全避免布局偏移问题。

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