0

How to get genearate id while clicked that place to show number in image like(1,2,3,4) UI level is there any chance to achieve in both and Android and ios in xamarin or renderer. Thanks Advance

I am using Sfimageditor when I clicked particular position tap am getting x and y position based on I have to show the numbers on that posotion

Xaml code

<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>

When clicked PhotoSource and save to generate id shows in UI level in image

Android Customimagerendeer:

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

Ios Customimagerendeer:

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

1 Answers1

0

You can use relativelayout to set controls over picture, it has

XConstraint, of type Constraint, which is an attached property that represents the constraint on the X position of the child.

YConstraint, of type Constraint, which is an attached property that represents the constraint on the Y position of the child.

here is an example:

Xaml:

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

codebehind:

  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
           
        }

For more information about it,

you can refer to this

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

Adrain
  • 1,946
  • 1
  • 3
  • 7
  • Thanks. We need to add label text (1,2,3,4) based on the image X and Y axis. I have taken X and Y axis from the image using below reference link. https://social.msdn.microsoft.com/Forums/en-US/50318e68-4e06-4d08-8d2d-d839f720d006/how-do-i-put-points-on-image-and-get-coordinates-of-those-points-?forum=xamarinforms Do we need to do any calculations to do set LayoutBounds? Please suggest – newxamarin Oct 11 '21 at 10:14
  • If you want set the layout, use code like " absoluteLayout.Children.Add(new Label { Text = "Stylish Header", FontSize = 24 }, new Point(30,25)); " – Adrain Oct 14 '21 at 02:07
  • Please check the below link. https://stackoverflow.com/questions/69552007/how-to-set-absoluteposition-on-my-image-using-absolutelayout-in-xamarin-forms?noredirect=1#comment122941223_69552007 – newxamarin Oct 14 '21 at 05:13
  • try tapgetsure then https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/tap – Adrain Oct 14 '21 at 08:57
  • How to place inside text in image based on x and y position – newxamarin Oct 14 '21 at 10:12
  • check the update – Adrain Oct 15 '21 at 07:52
  • image appear top left and shows small and text position in wrong place based on the image X and Y axis – newxamarin Oct 15 '21 at 08:19
  • .... then use absolutelayout, set the x,y in new Rectangle(); – Adrain Oct 15 '21 at 09:02
  • Also tried absolutelayout it works based on screen position not image position – newxamarin Oct 15 '21 at 09:19
  • the x y you get is based on screen and you want to set based on image – Adrain Oct 18 '21 at 09:05
  • https://stackoverflow.com/questions/69611203/in-android-we-have-pixels-to-dp-and-dp-to-pixels-and-how-to-achieve-in-ios-xamar pls check that link. Thanks advance – newxamarin Oct 18 '21 at 09:09
  • I am checking it – Adrain Oct 19 '21 at 01:18