Xamarin.Forms Android/iOS端点击图片显示序号实现方案问询

完全可以实现，以下是两种可直接落地的实现方案，你可以根据项目需求选择：

不需要改自定义渲染器代码，直接在Forms层叠加UI元素即可实现，逻辑更简单好维护：

• 首先修改XAML结构，将CustomImage嵌套在RelativeLayout中，用于承载序号标签：

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <RelativeLayout x:Name="ImgContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <local:CustomImage x:Name="Img" TapEvent="Img_TapEvent"  Source="{Binding PhotoSource}" 
                           HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFit">
            <local:CustomImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ImageTapCommand}" />
            </local:CustomImage.GestureRecognizers>
        </local:CustomImage>
    </RelativeLayout>
</StackLayout>

• 后台代码维护全局序号计数器，以及点击点的存储逻辑：

// 全局序号计数器
private int _currentOrderIndex = 1;

private void Img_TapEvent(float x, float y)
{
    // 创建序号标签
    var orderLabel = new Label
    {
        Text = _currentOrderIndex.ToString(),
        TextColor = Color.White,
        FontSize = 16,
        FontAttributes = FontAttributes.Bold,
        BackgroundColor = Color.FromRgba(0,0,0,0.7),
        Padding = new Thickness(6,2),
        CornerRadius = 10
    };

    // 计算标签位置，让标签中心对齐点击点
    var labelSize = orderLabel.Measure(double.PositiveInfinity, double.PositiveInfinity).Request;
    RelativeLayout.SetXConstraint(orderLabel, Constraint.Constant(x - labelSize.Width / 2));
    RelativeLayout.SetYConstraint(orderLabel, Constraint.Constant(y - labelSize.Height / 2));

    // 把标签添加到容器
    ImgContainer.Children.Add(orderLabel);

    // 序号自增
    _currentOrderIndex++;
}

注意：如果需要避免点击图片外的空白区域（AspectFit模式下图片上下/左右会有留白）也生成序号，只需要额外计算图片实际显示区域的偏移量，判断点击坐标是否落在实际图片范围内即可。

如果需要序号和图片更紧密绑定、或者后续要导出带序号的图片，直接在原生层绘制的方案性能更高：

Android端修改 #

1. 首先在Forms层的CustomImage控件中添加一个可观察集合，用于存储点击点和对应的序号：

public ObservableCollection<(float X, float Y, int Index)> TapPoints { get; set; } = new();

2. 自定义渲染器中监听集合变化，每次更新触发重绘，重写OnDraw方法绘制序号：

public override void OnDraw(Canvas canvas)
{
    base.OnDraw(canvas);
    var paint = new Paint
    {
        Color = Android.Graphics.Color.White,
        TextSize = 48,
        AntiAlias = true
    };
    // 遍历所有点绘制序号
    foreach (var point in Element.TapPoints)
    {
        canvas.DrawText(point.Index.ToString(), point.X, point.Y, paint);
    }
}

3. 原有OnTouch方法中拿到坐标后，往TapPoints集合添加元素即可触发重绘。

iOS端修改 #

1. 同理在TapHandler中拿到坐标后，往TapPoints集合添加元素
2. 重写渲染器的Draw方法，遍历集合绘制序号：

public override void Draw(CGRect rect)
{
    base.Draw(rect);
    foreach (var point in Element.TapPoints)
    {
        var text = new NSString(point.Index.ToString());
        text.DrawString(new CGPoint(point.X, point.Y), UIFont.SystemFontOfSize(16), UIColor.White);
    }
}

如果使用SfImageEditor控件，也可以直接调用控件自带的AddText方法，传入拿到的坐标和序号文本即可，无需自己实现绘制逻辑。

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