在android和ios xamarin表单中单击或点击图像时如何显示数字（1,2,3）

Question

如何在单击该位置以在图像中显示数字（1,2,3,4）时获取生成 ID，UI 级别是否有机会在 xamarin 或渲染器中的 Android 和 ios 中实现。谢谢提前

当我点击特定位置时，我正在使用 Sfimageeditor，因为我必须显示该位置上的数字，所以我得到了 x 和 y 位置

Xaml 代码

<StackLayout Orientation="Vertical" 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>
        </StackLayout>

当点击 PhotoSource 并保存以在图像的 UI 级别中生成 id 显示时

Android 自定义图像渲染器：

 public bool OnTouch(Android.Views.View v, MotionEvent e)
        {
            float Xaxis = e.GetX();
            flaot Yaxis = e.GetY();
            return false;
        }

Ios 自定义图像渲染器：

public void TapHandler(UITapGestureRecognizer tgr)
        {
            CGPoint touchPoint = tgr.LocationInView(nativeElement);
            formsElement.OnTapEvent(float Xaxis = (float)touchPoint.X, float Yaxis = (float)touchPoint.Y);
        }

Answer 1

你可以使用 relativelayout 来设置图片的控件，它有

XConstraint，Constraint 类型，它是一个附加属性， 表示对child的X位置的约束。

YConstraint，Constraint 类型，它是一个附加属性，表示 约束孩子的 Y 位置。

这是一个例子：

Xaml：

               <RelativeLayout x:Name="rel">
            <StackLayout>
              <Image Source="mypic.jpg" x:Name="pic">
                  <Image.GestureRecognizers>
                      <TapGestureRecognizer Tapped="on_Tapped"/>
                  </Image.GestureRecognizers>
              </Image>
                </StackLayout>
        </RelativeLayout>

代码隐藏：

  private void on_Tapped(object sender, EventArgs e)
        {
            rel.Children.Add(new Label
            {Text="1",
            TextColor=Color.Red

            }, () => new Rectangle(0, 10, 20, 20));//here is where you want to add the label
           
        }

如需了解更多信息，

你可以参考这个

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relativelayout