Implementing the Pinch Zoom Gesture

The pinch zoom gesture is similar, except it starts when the second finger is pressed to the screen (ACTION_POINTER_DOWN).

Download Touchv1/src/org/example/touch/

case MotionEvent.ACTI0N_P0INTER_D0WN: oldDist = spacing(event); Log.d(TAG, "oldDist=" + oldDist); if (oldDist > 10f) {

savedMatrix.set(matrix); midPoint(mid, event); mode = ZOOM;


case MotionEvent.ACTI0N_M0VE: if (mode == DRAG) { // ...

float newDist = spacing(event); Log.d(TAG, "newDist=" + newDist); if (newDist > 10f) {


float scale = newDist / oldDist;

matrix.postScale(scale, scale, mid.x, mid.y);


When we get the down event for the second finger, we calculate and remember the distance between the two fingers. In my testing, Android would sometimes tell me (incorrectly) that there were two fingers pressed down in almost exactly the same position. So, I added an check to ignore the event if the distance is smaller than some arbitrary number of pixels. If it's bigger than that, we remember the current transformation matrix, calculate the midpoint of the two fingers, and start the zoom.

When a move event arrives while we're in zoom mode, we calculate the distance between the fingers again. If it's too small, the event is ignored; otherwise, we restore the transformation matrix and scale the image around the midpoint.

The scale is simply the ratio of the new distance divided by the old distance. If the new distance is bigger (that is, the fingers have gotten farther apart), then the scale will be greater than 1, making the image bigger. If it's smaller (fingers closer together), then the scale will be less than one, making the image smaller. And of course if everything is the same, the scale is equal to 1 and the image is not changed.

Now let's define the spacing() and midPoint() methods. Distance Between Two Points

To find out how far apart two fingers are, we first construct a vector (x, y) that is the difference between the two points. Then we use the formula for Euclidean distance to calculate the spacing:4

Download Touchvl/src/org/example/touch/

private float spacing(MotionEvent event) { float x = event.getX(0) - event.getX(1); float y = event.getY(0) - event.getY(1); return FloatMath.sqrt(x * x + y * y);

The order of the points does not matter because any negative signs will be lost when we square them. Note that all math is done using Java's float type. Although some Android devices may not have floatingpoint hardware, we're not doing this often enough to worry about its performance.

Midpoint of Two Points

Calculating a point in the middle of two points is even easier:

Download Touchv1/src/org/example/touch/

private void midPoint(PointF point, MotionEvent event) { float x = event.getX(0) + event.getX(1); float y = event.getY(0) + event.getY(1); point.set(x / 2, y / 2);


All we do is take the average of their X and Y coordinates. To avoid garbage collections that can cause noticeable pauses in the application, we reuse an existing object to store the result rather than allocating and returning a new one each time.

Try running the program now on your phone. Drag the image with one finger, and zoom it by pinching two fingers in or out. For best results, don't let your fingers get closer than an inch or so apart. Otherwise, you'll start to run into some of those bugs in the API I mentioned earlier.

0 0

Post a comment