缩放时如何计算AbsoluteLayout中新增图片的位置？

核心问题是你当前使用屏幕绝对坐标放置Pin图，而缩放时大图的Scale和Translation变换不会自动同步到AbsoluteLayout中的子元素。正确的做法是基于原始大图的相对坐标存储Pin图位置，再根据实时缩放参数反向计算Pin图的绝对位置。

1. 存储Pin图的相对坐标（点击时） #

用户点击大图时，不要直接用屏幕点击的X/Y，而是计算该点相对于大图本身的比例坐标（0~1范围），把这个比例存在Pin图的Tag或自定义属性中：

// 点击背景图的事件处理方法
void OnBackgroundImageTapped(object sender, TapGestureRecognizerEventArgs e)
{
    var backgroundImage = sender as Image;
    // 计算点击位置相对于原始大图的比例坐标
    var relativeX = e.GetPosition(backgroundImage).Value.X / backgroundImage.Width;
    var relativeY = e.GetPosition(backgroundImage).Value.Y / backgroundImage.Height;

    // 创建Pin图
    var pinImage = new Image
    {
        Source = "pin_icon.png",
        WidthRequest = 40,
        HeightRequest = 40,
        // 存储相对坐标，用Tag临时存储也可自定义绑定属性
        Tag = new Tuple<double, double>(relativeX, relativeY)
    };

    // 计算初始绝对位置（适配当前缩放状态）
    var initialX = (relativeX * backgroundImage.Width * currentScale) + Content.TranslationX - (pinImage.WidthRequest / 2);
    var initialY = (relativeY * backgroundImage.Height * currentScale) + Content.TranslationY - (pinImage.HeightRequest / 2);

    // 添加到AbsoluteLayout
    AbsoluteLayout.SetLayoutBounds(pinImage, new Rectangle(initialX, initialY, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
    AbsoluteLayout.SetLayoutFlags(pinImage, AbsoluteLayoutFlags.None);
    YourAbsoluteLayout.Children.Add(pinImage);
}

2. 在缩放更新时同步Pin图位置 #

修改你的OnPinchUpdated方法，在缩放过程和完成后，遍历所有Pin图重新计算位置：

void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
    if (e.Status == GestureStatus.Started)
    {
        startScale = Content.Scale;
        Content.AnchorX = 0;
        Content.AnchorY = 0;
        startTransX = Content.TranslationX; // 修复原代码笔误：应为Content的偏移而非pin的
        startTranxY = Content.TranslationY;
    }
    if (e.Status == GestureStatus.Running)
    {
        currentScale = currentScale + (e.Scale - 1) * startScale;
        currentScale = Math.Max(1, currentScale);
           
        double renderedX = Content.X + xOffset;
        double deltaX = renderedX / Width;
        double deltaWidth = Width / (Content.Width * startScale);
        double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

        double renderedY = Content.Y + yOffset;
        double deltaY = renderedY / Height;
        double deltaHeight = Height / (Content.Height * startScale);
        double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

        double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
        double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

        Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
        Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0); // 修复原代码笔误：用Height替代Width
        
        xOffset = Content.TranslationX;
        yOffset = Content.TranslationY;
        
        Content.Scale = currentScale;

        // 同步所有Pin图位置
        UpdatePinPositions();
    }
    if (e.Status == GestureStatus.Completed)
    {
        xOffset = Content.TranslationX;
        yOffset = Content.TranslationY;
        // 缩放完成后再同步一次，确保位置准确
        UpdatePinPositions();
    }
}

// 新增Pin位置更新方法
void UpdatePinPositions()
{
    var backgroundImage = Content as Image;
    foreach (var child in YourAbsoluteLayout.Children)
    {
        if (child is Image pinImage && pinImage.Tag is Tuple<double, double> relativePos)
        {
            // 根据相对坐标计算当前绝对位置
            double newX = (relativePos.Item1 * backgroundImage.Width * currentScale) + Content.TranslationX - (pinImage.WidthRequest / 2);
            double newY = (relativePos.Item2 * backgroundImage.Height * currentScale) + Content.TranslationY - (pinImage.HeightRequest / 2);
            
            // 更新AbsoluteLayout中的Pin图位置
            AbsoluteLayout.SetLayoutBounds(pinImage, new Rectangle(newX, newY, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        }
    }
}

关键注意点 #

• 必须用相对于原始大图的比例坐标存储Pin位置，而非屏幕绝对坐标，这样才能在任意缩放比例下准确映射位置。
• 计算Pin位置时减去自身宽高的一半，是为了让Pin图中心对准初始点击位置（如果需求是左上角对准，可去掉该部分）。
• 原代码中两处笔误已修复：startTransX应取Content的偏移，targetY的Clamp上限应使用Content.Height而非Width。

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