Pick image coordinate by clicking on it

Question

I’m in a Xamarin/Android project. I need that when the user touches on a ImageView I can get the coordinates (from the image) from that touch.

How to do this?

Answer 1

I recently went through a similar case, and, if you’re really looking for the coordinates of image, the way you did it won’t work because the argument e contains information of the place of the ImageView that was touched, and not the place of Imagery.

to better illustrate:

let’s say you have a device with a resolution of 1920x1080, and a ImageView with width with value set as match_parent, and the src with a 1280x720 image. If you touch the top right corner of the image, the GetX() return 1080 (place of the screen) and not 720 (place of the image that was really touched)

Solution: continue using this method, but to know the actual position of the tap on Imagery, calculate the image size difference before being placed on ImageView, and after being placed.

byte[] decodedString = Base64.Decode(ImagemOriginal, Base64Flags.Default);
Bitmap decodedByte = BitmapFactory.DecodeByteArray(decodedString, 0, decodedString.Length);       
int originalWidth = decodedByte.Width;

ImageView imag = _View.FindViewById<ImageView>(Resource.Id.img);
imag.SetImageBitmap(decodedByte);
Double fatorDiferenca = (double)imag.MeasuredWidth /(double)originalWidth;

then whenever you want to take the position in the image, multiply the value obtained by GetX() for fatorDiferenca:

var posicaoReal = e.Event.GetX() * fatorDiferenca;

(That goes for both X and Y)

Edit: In order to draw something in the place you clicked you should only use Getx() and Gety() normally, as you will be drawing effectively on ImageView and not in the image that served as Source. For you to draw something inside your ImageView I’m afraid you’ll have to make a class inheriting from ImageView so I can do this:

   public class CustomImageView : ImageView
   {
        private int _CurrentX;
        private int _CurrentY;

        public override bool OnTouchEvent(MotionEvent e)
        {
            if (e.Action == MotionEventActions.Up)
            {
                _CurrentX = (int)e.GetX();
                _CurrentY = (int)e.GetY();

                Invalidate();
            }

            return true;
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);

            using (var paint = new Paint(PaintFlags.AntiAlias))
            {
                paint.Color = Color.Red;

                canvas.DrawCircle(_CurrentX, _CurrentY, 20, paint);    
            }
        }
    }

So you know where image you are clicking, in pixels, you have to do as I had said, take the Getx() and multiply by the difference factor, if you want you can store in a variable for future uses.

Answer 2

I solved my problem by doing the following:

First I created a relationship between my ImageView and my Activity:

private ImageView _myImage; _myImage = FindViewById<ImageView>(Resource.Id.myImage);

So I created a ringtone event for my ImageView:

_myImage.Touch += _myImage_Touch;

And in his method, he picks up the touch coordinates through the parameter e accessing the e.Event.GetX(); and e.Event.GetY(); I also used a if that the value of e.Event.Action is equal to MotionEventActions.Down. Thus, the event only runs once, when the finger touches the screen.

The method was like this:

private void _imgRoute_Touch(object sender, View.TouchEventArgs e)
{
    if(e.Event.Action == MotionEventActions.Down)
    {   
      float x = e.Event.GetX();
      float y = e.Event.GetY();

      //resto do meu código
    }
}