时间戳

首页 > 解决方案 > 在android和ios xamarin表单中单击或点击图像时如何显示数字（1,2,3）

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

问题描述

如何在单击该位置以在图像中显示数字（例如（1,2,3,4）UI 级别）时生成生成 ID 是否有机会在 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);
        }

标签： imagexamarin.formsxamarin.androidxamarin.iosnumbers

解决方案

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

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

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

这是一个例子：

xml:

               <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

推荐阅读