OnScale and Canvas - how to adjust the start point after scaling an image?

Question

I have a very simple test application with a custom component MyView.java - which displays a scrollable and scalable image (which is a Scrabble-style game):

1) In my scale listener, I adjust the scale factor:

public boolean onScale(ScaleGestureDetector detector) { mScale *= detector.getScaleFactor(); // XXX how to adjust mOffsetX and mOffsetY ? XXX constrainZoom(); constrainOffsets(); invalidate(); return true; } 

2) And then in the drawing method of my custom component, I apply the translation and scaling factor:

 protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.translate(mOffsetX, mOffsetY); canvas.scale(mScale, mScale); gameBoard.setBounds( 0, 0, gameBoard.getIntrinsicWidth(), gameBoard.getIntrinsicHeight() ); gameBoard.draw(canvas); } 

Unfortunately, it seems that there is a small error when scaling with a pinch gesture -

I see that the scale and borders are the right size after scaling, but the image offset is not.

The problem gets worse when the focus point of the hard pind is far from the 0, 0 point of the screen.

It’s a little difficult to describe the problem in words, but when you check out my test project from GitHub , you will immediately see it (and you can always double-click the reset offset and scale).

This is probably a common problem with the standard way to solve it, but I have not been able to find it yet.

Image of Denelson83 CC BY-SA board and code based on How to support a running gesture with a bounce effect .

Answer 1

You move the canvas twice: first with translate , then with scale(sx,sy,px,py); .

You can combine the tricks with your offsets in your onScale , and then use scale(sx,sy) .