1

I have an vector/PNG image on a image view. I need to track where the user touches on the image and mark the points. I have done this part. But I am facing a problem. Since the image shape is irregular, there is space between image and image view (rectangle) boundaries.

If the user touches the imageview but not the image (ie) the space between the boundaries, these points should not be marked. Is there a way to do this ? 


    imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {

                        modelWidth = selected_Car_Image.getWidth();
                        modelHeight = selected_Car_Image.getHeight();

                        float xTouchCoordinate = motionEvent.getX();
                        float yTouchCoordinate = motionEvent.getY();

                    return false;
                }
            });

        }


    <RelativeLayout
        android:id="@+id/carImageViewLayout"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="200dp"
            android:layout_height="400dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />
    </RelativeLayout>

enter image description here

And I use xTouchCoordinate and yTouchCoordinate to draw a point as when the user touches.

In this example, I dont wan't to track any points that the user clicks outside the laptop. But if the user clicks on the laptop I need those points.

Hariharasudhan Gunasekaran
  • 51
  • 4

2 Answers2

0

First of all it is impossible to tell if the click was on the image (laptop there) or not if the ImageView size will be computed to display those 'white areas'.
So basically what we need there is a little change in the layouts - we need that image just to be the right size - we can achieve this in many ways.
First of them will be using wrap_content for android:layout_width and android:layout_height. (using hard coded values is generally considered a bad habit). If the image displays correctly then problem solved, if not you can play with scaleType attribute and see if anything works for you.
Another possible solution to your problem would be using android:adjustViewBounds="true" for your ImageView - the view will adjust view bounds to fill available space when preserving aspect ratio of the image - official docs, then again you should not use hardcoded values there.

kolboc
  • 805
  • 1
  • 8
  • 22
0
imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                boolean isTouchOutSide = isOutSideTouch(view, motionEvent);
                return false;
         }
        });

And use the below function to find the touchableArea

private boolean isOutSideTouch(View view, MotionEvent event) {
    int[] offset = new int[2];
    float[] values = new float[9];
    ImageView imageView = (ImageView) view;
    Matrix m = imageView.getImageMatrix();

    m.getValues(values);

    offset[0] = (int) values[Matrix.MTRANS_Y];
    offset[1] = (int) values[Matrix.MTRANS_X];
    float drawableWidth = imageView.getDrawable().getIntrinsicWidth();
    float drawableHeight = imageView.getDrawable().getIntrinsicHeight();
    float displayedWidth = drawableWidth * values[Matrix.MSCALE_X];
    float displayedHeight = drawableHeight * values[Matrix.MSCALE_Y];

    float topMargin = offset[0];
    float leftMargin = offset[1];

    RectF drawableRect = new RectF(
            leftMargin,
            topMargin,
            (leftMargin + displayedWidth),
            (topMargin + displayedHeight));
    return !drawableRect.contains(event.getX(), event.getY());
}

Let me know if that works.

Anil Prajapati
  • 457
  • 3
  • 10