Styjun

I am having a bit of trouble trying to fix a bug in the zoom and panning operation of my canvas. Currently the zooming and panning functionality does work in that the canvas can be zoomed into or panned across, however the issue is that when the canvas is in a panned state (the image has been panned across) and the canvas invalidates (when the screen is touched again e.g. to continue panning) it snaps back to its original co-ordinates rather than continuing to pan from the previous state. To illustrate:

Let's say this is the image that I am wanting to pan.

This is the image after panning to the left.

This is the result of when I tap the screen again to continue panning to the left, as can be seen it snaps back to the middle whereas I want it to stay at the panning state it was previously so that panning can continue from that point. Below is my code:

private final static float mMinZoom = 1.f;
private final static float mMaxZoom = 3.f;
private float mScaleFactor = 1.f;
private ScaleGestureDetector mScaleGestureDetector;
private final static int NONE = 0;
private final static int PAN = 1;
private final static int ZOOM = 1;
private int mEventState;
private float mStartX = 0;
private float mStartY = 0;
private float mTranslateX = 0;
private float mTranslateY = 0;

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener
 @Override
 public boolean onScale(ScaleGestureDetector detector)
 mScaleFactor *= detector.getScaleFactor();
 mScaleFactor = Math.max(mMinZoom, Math.min(mMaxZoom,mScaleFactor));
 //invalidate();
 //requestLayout();
 return super.onScale(detector);
 


public DrawGraphTest(Context context) 
 super(context);
 init();


public DrawGraphTest(final Context context, final AttributeSet attrs) 
 super(context, attrs);
 init();
 mScaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleListener());


@Override
public boolean onTouchEvent(MotionEvent event) 
 switch(event.getAction() & MotionEvent.ACTION_MASK)
 case MotionEvent.ACTION_DOWN:
 mEventState = PAN;
 mStartX = event.getX();
 mStartY = event.getY();
 Log.d("coordinates", String.valueOf(event.getX() / mScaleFactor));
 break;
 case MotionEvent.ACTION_UP:
 mEventState = NONE;
 break;
 case MotionEvent.ACTION_MOVE:
 mTranslateX = event.getX() - mStartX;
 mTranslateY = event.getY() - mStartY;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 mEventState = ZOOM;
 break;
 
 mScaleGestureDetector.onTouchEvent(event);
 if((mEventState == PAN && mScaleFactor != mMinZoom) 

private void init() 
 //Various paints and such


@Override
protected void onDraw(Canvas canvas) 
 super.onDraw(canvas);

 canvas.save();
 canvas.scale(mScaleFactor,mScaleFactor);
 canvas.translate(mTranslateX / mScaleFactor, mTranslateY /mScaleFactor);

 //Draw various stuff to canvas
 //.....
 canvas.restore();

Any help with this would be greatly appreciated as I am very new to using Android Studio, cheers!