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

Posted 2023-03-25

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

【英文标题】：How to show numbers(1,2,3) when clicked or tapped image in both android and ios xamarin forms

【发布时间】：2021-11-28 04:20:20

【问题描述】：

如何在单击该位置以在图像中显示数字（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);
        

【问题讨论】：

我正在使用 CustomImagerender 如何在 android 和 ios 中生成 id 和查看 UI 级别

UI 级别是什么意思？

@JuanSturla 请在图像中查看此屏幕截图（例如，当我单击矩形框并根据 x 和 y 坐标保存其显示 1,2 时）

【参考方案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

【讨论】：

谢谢。我们需要根据图像 X 和 Y 轴添加标签文本（1,2,3,4）。我使用下面的参考链接从图像中获取了 X 和 Y 轴。 social.msdn.microsoft.com/Forums/en-US/…我们需要做任何计算来设置布局边界吗？请建议

如果你想设置布局，使用类似“absoluteLayout.Children.Add(new Label Text = "Stylish Header", FontSize = 24 , new Point(30,25)); "

请查看以下链接。 ***.com/questions/69552007/…

试试 Tapgetsure 然后docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…

如何根据 x 和 y 位置在图像中放置文本