-1

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

Snake
  • 14,228
  • 27
  • 117
  • 250
  • Could you draw two pictures for your demand ?one picture is original state and another is zoomed state. – aolphn Nov 05 '18 at 14:06
  • @pskink I know the generic idea is I have to get some matrix from photoview and apply it to overlay. What that entails, I have no idea. I need the overlay as actually has many custom views drawn dynamically over the photoview. – Snake Nov 05 '18 at 17:00
  • @Aolphn. No idea why you are referring to 2 pictures. It is one picture I have and then I have views on top. I want the views location to update based on zoom/scroll – Snake Nov 05 '18 at 17:02
  • @Snake you already solfe this problem ? iam facing same issue – Yudi karma Jul 23 '19 at 03:57

2 Answers2

1

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()
}
jj.
  • 2,210
  • 3
  • 21
  • 22
0

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.

    }
};
Abhay Koradiya
  • 2,068
  • 2
  • 15
  • 40