How to adjust an overlay location in response to PhotoView zoom/pan

Question

I am using chrisbanes/PhotoView library to handle image zoom/pan.

I am displaying an overlay on top. Basically, I add a view on top of the image view at specific coordinates.

For example, I add a custom view (where I draw an arrow in the onDraw method) at location (200,300) when photoView originally load the image.

Now let's say the user zoomed/panned. How can I adjust the custom view location so it is located on the same spot (in relation to the image) as before.

I have spent few days pulling hair and can't figure it out. I don't want the overlay to zoom. I just want it's location to be correct

Thank you

Here is my XML so you have an idea of things

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/rootView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <com.github.chrisbanes.photoview.PhotoView
            android:id="@+id/ivMainPhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <com.xx.xx.GraphicOverlay
            android:id="@+id/graphicOverlay"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/ivMainPhoto"
            app:layout_constraintEnd_toEndOf="@+id/ivMainPhoto"
            app:layout_constraintStart_toStartOf="@+id/ivMainPhoto"
            app:layout_constraintTop_toTopOf="@+id/ivMainPhoto" />
</android.support.constraint.ConstraintLayout

Basically here the overlay is just container where I add my custom views. So basically 0,0 starts at the top left corner of the PhotoView

Answer 1

you can use OnViewTapListener to get touch co-ordinate on zoomed image Like,

/**
 * Notify when tap on Zoom Image perform.
 */
private OnViewTapListener onImageTap = new OnViewTapListener() {
    @Override
    public void onViewTap(View view, float x, float y) {
        // x and y is the co-ordinate of touch.

    }
};

Answer 2

You have to set a matrix change listener on your PhotoView (setOnMatrixChangeListener). When that fires, you redraw your other views using the displayRect from your photoview.

Something like this:

var arrowLocation: PointF(50f,50f)

fun drawArrow() {
  val arrowPosition = // calculate coordinates to display using `photoView.displayRect`
  graphicOverlay.drawArrow(arrowPosition)
}

...

photoView.setOnMatrixChangeListener {
  drawArrow()
}