{"id":1416,"date":"2013-04-09T11:16:15","date_gmt":"2013-04-09T05:46:15","guid":{"rendered":"http:\/\/judepereira.com\/blog\/?p=1416"},"modified":"2013-07-30T21:37:29","modified_gmt":"2013-07-30T16:07:29","slug":"multi-touch-in-android-translate-scale-and-rotate","status":"publish","type":"post","link":"https:\/\/judepereira.com\/blog\/multi-touch-in-android-translate-scale-and-rotate\/","title":{"rendered":"Multi Touch in Android – Translate, Scale, and Rotate"},"content":{"rendered":"

Here’s a quick and easy implementation of Android’s multi touch feature – one finger to move, two to zoom, and three to rotate the image.<\/p>\n

Assuming you have a basic understanding of 2D matrix transformations, the Matrix<\/a> class in Android uses a 3×3 matrix to achieve all of the 2D transformations.<\/p>\n

The source code and pre -built APK is available. See the end of this post.<\/p>\n

Main activity – MultiTouch.java
\n[code language=”java”]
\npackage com.multitouch.example;<\/p>\n

import android.app.Activity;
\nimport android.graphics.Matrix;
\nimport android.graphics.PointF;
\nimport android.os.Bundle;
\nimport android.util.FloatMath;
\nimport android.view.MotionEvent;
\nimport android.view.View;
\nimport android.view.View.OnTouchListener;
\nimport android.widget.ImageView;<\/p>\n

public class MultiTouch extends Activity implements OnTouchListener {<\/p>\n

\/\/ these matrices will be used to move and zoom image
\n private Matrix matrix = new Matrix();
\n private Matrix savedMatrix = new Matrix();
\n \/\/ we can be in one of these 3 states
\n private static final int NONE = 0;
\n private static final int DRAG = 1;
\n private static final int ZOOM = 2;
\n private int mode = NONE;
\n \/\/ remember some things for zooming
\n private PointF start = new PointF();
\n private PointF mid = new PointF();
\n private float oldDist = 1f;
\n private float d = 0f;
\n private float newRot = 0f;
\n private float[] lastEvent = null;<\/p>\n

@Override
\n public void onCreate(Bundle savedInstanceState) {
\n super.onCreate(savedInstanceState);
\n setContentView(R.layout.main);
\n ImageView view = (ImageView) findViewById(R.id.imageView);
\n view.setOnTouchListener(this);
\n }<\/p>\n

public boolean onTouch(View v, MotionEvent event) {
\n \/\/ handle touch events here
\n ImageView view = (ImageView) v;
\n switch (event.getAction() & MotionEvent.ACTION_MASK) {
\n case MotionEvent.ACTION_DOWN:
\n savedMatrix.set(matrix);
\n start.set(event.getX(), event.getY());
\n mode = DRAG;
\n lastEvent = null;
\n break;
\n case MotionEvent.ACTION_POINTER_DOWN:
\n oldDist = spacing(event);
\n if (oldDist > 10f) {
\n savedMatrix.set(matrix);
\n midPoint(mid, event);
\n mode = ZOOM;
\n }
\n lastEvent = new float[4];
\n lastEvent[0] = event.getX(0);
\n lastEvent[1] = event.getX(1);
\n lastEvent[2] = event.getY(0);
\n lastEvent[3] = event.getY(1);
\n d = rotation(event);
\n break;
\n case MotionEvent.ACTION_UP:
\n case MotionEvent.ACTION_POINTER_UP:
\n mode = NONE;
\n lastEvent = null;
\n break;
\n case MotionEvent.ACTION_MOVE:
\n if (mode == DRAG) {
\n matrix.set(savedMatrix);
\n float dx = event.getX() – start.x;
\n float dy = event.getY() – start.y;
\n matrix.postTranslate(dx, dy);
\n } else if (mode == ZOOM) {
\n float newDist = spacing(event);
\n if (newDist > 10f) {
\n matrix.set(savedMatrix);
\n float scale = (newDist \/ oldDist);
\n matrix.postScale(scale, scale, mid.x, mid.y);
\n }
\n if (lastEvent != null && event.getPointerCount() == 3) {
\n newRot = rotation(event);
\n float r = newRot – d;
\n float[] values = new float[9];
\n matrix.getValues(values);
\n float tx = values[2];
\n float ty = values[5];
\n float sx = values[0];
\n float xc = (view.getWidth() \/ 2) * sx;
\n float yc = (view.getHeight() \/ 2) * sx;
\n matrix.postRotate(r, tx + xc, ty + yc);
\n }
\n }
\n break;
\n }<\/p>\n

view.setImageMatrix(matrix);
\n return true;
\n }<\/p>\n

\/**
\n * Determine the space between the first two fingers
\n *\/
\n private float spacing(MotionEvent event) {
\n float x = event.getX(0) – event.getX(1);
\n float y = event.getY(0) – event.getY(1);
\n return FloatMath.sqrt(x * x + y * y);
\n }<\/p>\n

\/**
\n * Calculate the mid point of the first two fingers
\n *\/
\n private void midPoint(PointF point, MotionEvent event) {
\n float x = event.getX(0) + event.getX(1);
\n float y = event.getY(0) + event.getY(1);
\n point.set(x \/ 2, y \/ 2);
\n }<\/p>\n

\/**
\n * Calculate the degree to be rotated by.
\n *
\n * @param event
\n * @return Degrees
\n *\/
\n private float rotation(MotionEvent event) {
\n double delta_x = (event.getX(0) – event.getX(1));
\n double delta_y = (event.getY(0) – event.getY(1));
\n double radians = Math.atan2(delta_y, delta_x);
\n return (float) Math.toDegrees(radians);
\n }
\n}
\n[\/code]
\nAn important function that is always used is postXx(). This function concats a new matrix of the type Xx to the existing matrix object. Using setXx() will reset the matrix’s Xx property.
\nMain layout – main.xml
\n[code language=”xml”]
\n<\/p>\n

<\/p>\n

<\/p>\n

<\/FrameLayout>
\n[\/code]<\/p>\n

Browse and download the source code on GitHub.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Here’s a quick and easy implementation of Android’s multi touch feature – one finger to move, two to zoom, and three to rotate the image. Assuming you have a basic understanding of 2D matrix transformations, the Matrix class in Android uses a 3×3 matrix to achieve all of the 2D transformations. The source code and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[401],"tags":[446,556,445,447,75,442,443,444,435,437,440,438,436,439,441],"class_list":["post-1416","post","type-post","status-publish","format-standard","hentry","category-android","tag-2d-transformation","tag-android","tag-biitmap","tag-example","tag-image","tag-image-view","tag-imageview","tag-matrix","tag-multi","tag-multi-touch","tag-rotate","tag-scale","tag-touch","tag-translate","tag-view"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t