Android手势滑动实现两点触摸缩放图片

内容摘要
学习安卓手势滑动,多点触摸放大缩小图片,分享给大家供大家参考,具体代码如下

1.布局文件如下main.xml




<&#63;xml version="1.0" encoding="utf-8"&#63;>
<LinearLayout xm
文章正文

学习安卓手势滑动,多点触摸放大缩小图片,分享给大家供大家参考,具体代码如下
1.布局文件如下main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

 <!-- 引用自定义控件 -->
 <com.ymw.zoomimage.ZoomImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" >
 </com.ymw.zoomimage.ZoomImageView>

</LinearLayout>

2.自定义缩放图片控件ZoomImageView.java代码:

package com.ymw.zoomimage;

import java.util.Observable;
import java.util.Observer;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class ZoomImageView extends View implements Observer {

 /** Paint object used when drawing bitmap. */
 private final Paint mPaint = new Paint(Paint.FILTER_BITMAP_FLAG);

 /** Rectangle used (and re-used) for cropping source image. */
 private final Rect mRectSrc = new Rect();

 /** Rectangle used (and re-used) for specifying drawing area on canvas. */
 private final Rect mRectDst = new Rect();

 /** Object holding aspect quotient */
 private final AspectQuotient mAspectQuotient = new AspectQuotient();

 /** The bitmap that we're zooming in, and drawing on the screen. */
 private Bitmap mBitmap;

 /** State of the zoom. */
 private ZoomState mState;

 private BasicZoomControl mZoomControl;
 private BasicZoomListener mZoomListener;

 public ZoomImageView(Context context, AttributeSet attrs) {
  super(context, attrs);

  mZoomControl = new BasicZoomControl();

  mZoomListener = new BasicZoomListener();
  mZoomListener.setZoomControl(mZoomControl);

  setZoomState(mZoomControl.getZoomState());

  setOnTouchListener(mZoomListener);

  mZoomControl.setAspectQuotient(getAspectQuotient());
 }

 public void zoomImage(float f, float x, float y) {
  mZoomControl.zoom(f, x, y);
 }

 public void setImage(Bitmap bitmap) {
  mBitmap = bitmap;

  mAspectQuotient.updateAspectQuotient(getWidth(), getHeight(),
    mBitmap.getWidth(), mBitmap.getHeight());
  mAspectQuotient.notifyObservers();

  invalidate();
 }

 private void setZoomState(ZoomState state) {
  if (mState != null) {
   mState.deleteObserver(this);
  }

  mState = state;
  mState.addObserver(this);

  invalidate();
 }

 private AspectQuotient getAspectQuotient() {
  return mAspectQuotient;
 }

 @Override
 protected void onDraw(Canvas canvas) {
  if (mBitmap != null && mState != null) {

   Log.d("ZoomImageView", "OnDraw");

   final float aspectQuotient = mAspectQuotient.get();

   final int viewWidth = getWidth();
   final int viewHeight = getHeight();
   final int bitmapWidth = mBitmap.getWidth();
   final int bitmapHeight = mBitmap.getHeight();

   Log.d("ZoomImageView", "viewWidth = " + viewWidth);
   Log.d("ZoomImageView", "viewHeight = " + viewHeight);
   Log.d("ZoomImageView", "bitmapWidth = " + bitmapWidth);
   Log.d("ZoomImageView", "bitmapHeight = " + bitmapHeight);

   final float panX = mState.getPanX();
   final float panY = mState.getPanY();
   final float zoomX = mState.getZoomX(aspectQuotient) * viewWidth
     / bitmapWidth;
   final float zoomY = mState.getZoomY(aspectQuotient) * viewHeight
     / bitmapHeight;

   // Setup source and destination rectangles
   mRectSrc.left = (int) (panX * bitmapWidth - viewWidth / (zoomX * 2));
   mRectSrc.top = (int) (panY * bitmapHeight - viewHeight
     / (zoomY * 2));
   mRectSrc.right = (int) (mRectSrc.left + viewWidth / zoomX);
   mRectSrc.bottom = (int) (mRectSrc.top + viewHeight / zoomY);
   // mRectDst.left = getLeft();
   mRectDst.left = 0;
   mRectDst.top = 0;
   // mRectDst.right = getRight();
   mRectDst.right = getWidth();
   mRectDst.bottom = getHeight();

   // Adjust source rectangle so that it fits within the source image.
   if (mRectSrc.left < 0) {
    mRectDst.left += -mRectSrc.left * zoomX;
    mRectSrc.left = 0;
   }
   if (mRectSrc.right > bitmapWidth) {
    mRectDst.right -= (mRectSrc.right - bitmapWidth) * zoomX;
    mRectSrc.right = bitmapWidth;
   }
   if (mRectSrc.top < 0) {
    mRectDst.top += -mRectSrc.top * zoomY;
    mRectSrc.top = 0;
   }
   if (mRectSrc.bottom > bitmapHeight) {
    mRectDst.bottom -= (mRectSrc.bottom - bitmapHeight) * zoomY;
    mRectSrc.bottom = bitmapHeight;
   }

   mRectDst.left = 0;
   mRectDst.top = 0;
   mRectDst.right = viewWidth;
   mRectDst.bottom = viewHeight;

   Log.d("ZoomImageView", "mRectSrc.top" + mRectSrc.top);
   Log.d("ZoomImageView", "mRectSrc.bottom" + mRectSrc.bottom);
   Log.d("ZoomImageView", "mRectSrc.left" + mRectSrc.left);
   Log.d("ZoomImageView", "mRectSrc.right" + mRectSrc.right);

   Log.d("ZoomImageView", "mRectDst.top" + mRectDst.top);
   Log.d("ZoomImageView", "mRectDst.bottom" + mRectDst.bottom);
   Log.d("ZoomImageView", "mRectDst.left" + mRectDst.left);
   Log.d("ZoomImageView", "mRectDst.right" + mRectDst.right);

   canvas.drawBitmap(mBitmap, mRectSrc, mRectDst, mPaint);
  }
 }

 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
   int bottom) {
  super.onLayout(changed, left, top, right, bottom);

  mAspectQuotient.updateAspectQuotient(right - left, bottom - top,
    mBitmap.getWidth(), mBitmap.getHeight());
  mAspectQuotient.notifyObservers();
 }

 @Override
 public void update(Observable observable, Object data) {
  invalidate();
 }

 private class BasicZoomListener implements View.OnTouchListener {

  /** Zoom control to manipulate */
  private BasicZoomControl mZoomControl;

  private float mFirstX = -1;
  private float mFirstY = -1;
  private float mSecondX = -1;
  private float mSecondY = -1;

  private int mOldCounts = 0;

  /**
   * Sets the zoom control to manipulate
   * 
   * @param control
   *   Zoom control
   */
  public void setZoomControl(BasicZoomControl control) {
   mZoomControl = control;
  }

  public boolean onTouch(View v, MotionEvent event) {

   switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    mOldCounts = 1;
    mFirstX = event.getX();
    mFirstY = event.getY();
    break;
   case MotionEvent.ACTION_MOVE: {
    float fFirstX = event.getX();
    float fFirstY = event.getY();

    int nCounts = event.getPointerCount();

    if (1 == nCounts) {
     mOldCounts = 1;
     float dx = (fFirstX - mFirstX) / v.getWidth();
     float dy = (fFirstY - mFirstY) / v.getHeight();
     mZoomControl.pan(-dx, -dy);
    } else if (1 == mOldCounts) {
     mSecondX = event.getX(event.getPointerId(nCounts - 1));
     mSecondY = event.getY(event.getPointerId(nCounts - 1));
     mOldCounts = nCounts;
    } else {
     float fSecondX = event
       .getX(event.getPointerId(nCounts - 1));
     float fSecondY = event
       .getY(event.getPointerId(nCounts - 1));

     double nLengthOld = getLength(mFirstX, mFirstY, mSecondX,
       mSecondY);
     double nLengthNow = getLength(fFirstX, fFirstY, fSecondX,
       fSecondY);

     float d = (float) ((nLengthNow - nLengthOld) / v.getWidth());

     mZoomControl.zoom((float) Math.pow(20, d),
       ((fFirstX + fSecondX) / 2 / v.getWidth()),
       ((fFirstY + fSecondY) / 2 / v.getHeight()));

     mSecondX = fSecondX;
     mSecondY = fSecondY;
    }
    mFirstX = fFirstX;
    mFirstY = fFirstY;

    break;
   }

   }

   return true;
  }

  private double getLength(float x1, float y1, float x2, float y2) {
   return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
  }
 }

 private class BasicZoomControl implements Observer {

  /** Minimum zoom level limit */
  private static final float MIN_ZOOM = 1;

  /** Maximum zoom level limit */
  private static final float MAX_ZOOM = 16;

  /** Zoom state under control */
  private final ZoomState mState = new ZoomState();

  /** Object holding aspect quotient of view and content */
  private AspectQuotient mAspectQuotient;

  /**
   * Set reference object holding aspect quotient
   * 
   * @param aspectQuotient
   *   Object holding aspect quotient
   */
  public void setAspectQuotient(AspectQuotient aspectQuotient) {
   if (mAspectQuotient != null) {
    mAspectQuotient.deleteObserver(this);
   }

   mAspectQuotient = aspectQuotient;
   mAspectQuotient.addObserver(this);
  }

  /**
   * Get zoom state being controlled
   * 
   * @return The zoom state
   */
  public ZoomState getZoomState() {
   return mState;
  }

  /**
   * Zoom
   * 
   * @param f
   *   Factor of zoom to apply
   * @param x
   *   X-coordinate of invariant position
   * @param y
   *   Y-coordinate of invariant position
   */
  public void zoom(float f, float x, float y) {

   // Log.d("Zoom", "zoom f = " + f);

   final float aspectQuotient = mAspectQuotient.get();

   final float prevZoomX = mState.getZoomX(aspectQuotient);
   final float prevZoomY = mState.getZoomY(aspectQuotient);

   mState.setZoom(mState.getZoom() * f);
   limitZoom();

   final float newZoomX = mState.getZoomX(aspectQuotient);
   final float newZoomY = mState.getZoomY(aspectQuotient);

   // Pan to keep x and y coordinate invariant
   mState.setPanX(mState.getPanX() + (x - .5f)
     * (1f / prevZoomX - 1f / newZoomX));
   mState.setPanY(mState.getPanY() + (y - .5f)
     * (1f / prevZoomY - 1f / newZoomY));

   limitPan();

   mState.notifyObservers();
  }

  /**
   * Pan
   * 
   * @param dx
   *   Amount to pan in x-dimension
   * @param dy
   *   Amount to pan in y-dimension
   */
  public void pan(float dx, float dy) {
   final float aspectQuotient = mAspectQuotient.get();

   mState.setPanX(mState.getPanX() + dx
     / mState.getZoomX(aspectQuotient));
   mState.setPanY(mState.getPanY() + dy
     / mState.getZoomY(aspectQuotient));

   limitPan();

   mState.notifyObservers();
  }

  /**
   * Help function to figure out max delta of pan from center position.
   * 
   * @param zoom
   *   Zoom value
   * @return Max delta of pan
   */
  private float getMaxPanDelta(float zoom) {
   return Math.max(0f, .5f * ((zoom - 1) / zoom));
  }

  /**
   * Force zoom to stay within limits
   */
  private void limitZoom() {
   if (mState.getZoom() < MIN_ZOOM) {
    mState.setZoom(MIN_ZOOM);
   } else if (mState.getZoom() > MAX_ZOOM) {
    mState.setZoom(MAX_ZOOM);
   }
  }

  /**
   * Force pan to stay within limits
   */
  private void limitPan() {
   final float aspectQuotient = mAspectQuotient.get();

   final float zoomX = mState.getZoomX(aspectQuotient);
   final float zoomY = mState.getZoomY(aspectQuotient);

   final float panMinX = .5f - getMaxPanDelta(zoomX);
   final float panMaxX = .5f + getMaxPanDelta(zoomX);
   final float panMinY = .5f - getMaxPanDelta(zoomY);
   final float panMaxY = .5f + getMaxPanDelta(zoomY);

   if (mState.getPanX() < panMinX) {
    mState.setPanX(panMinX);
   }
   if (mState.getPanX() > panMaxX) {
    mState.setPanX(panMaxX);
   }
   if (mState.getPanY() < panMinY) {
    mState.setPanY(panMinY);
   }
   if (mState.getPanY() > panMaxY) {
    mState.setPanY(panMaxY);
   }
  }

  // Observable interface implementation

  public void update(Observable observable, Object data) {
   limitZoom();
   limitPan();
  }
 }

 private class AspectQuotient extends Observable {

  /**
   * Aspect quotient
   */
  private float mAspectQuotient;

  // Public methods

  /**
   * Gets aspect quotient
   * 
   * @return The aspect quotient
   */
  public float get() {
   return mAspectQuotient;
  }

  /**
   * Updates and recalculates aspect quotient based on supplied view and
   * content dimensions.
   * 
   * @param viewWidth
   *   Width of view
   * @param viewHeight
   *   Height of view
   * @param contentWidth
   *   Width of content
   * @param contentHeight
   *   Height of content
   */
  public void updateAspectQuotient(float viewWidth, float viewHeight,
    float contentWidth, float contentHeight) {
   final float aspectQuotient = (contentWidth / contentHeight)
     / (viewWidth / viewHeight);

   if (aspectQuotient != mAspectQuotient) {
    mAspectQuotient = aspectQuotient;
    setChanged();
   }
  }
 }

 private class ZoomState extends Observable {
  /**
   * Zoom level A value of 1.0 means the content fits the view.
   */
  private float mZoom;

  /**
   * Pan position x-coordinate X-coordinate of zoom window center
   * position, relative to the width of the content.
   */
  private float mPanX;

  /**
   * Pan position y-coordinate Y-coordinate of zoom window center
   * position, relative to the height of the content.
   */
  private float mPanY;

  // Public methods

  /**
   * Get current x-pan
   * 
   * @return current x-pan
   */
  public float getPanX() {
   return mPanX;
  }

  /**
   * Get current y-pan
   * 
   * @return Current y-pan
   */
  public float getPanY() {
   return mPanY;
  }

  /**
   * Get current zoom value
   * 
   * @return Current zoom value
   */
  public float getZoom() {
   return mZoom;
  }

  /**
   * Help function for calculating current zoom value in x-dimension
   * 
   * @param aspectQuotient
   *   (Aspect ratio content) / (Aspect ratio view)
   * @return Current zoom value in x-dimension
   */
  public float getZoomX(float aspectQuotient) {
   return Math.min(mZoom, mZoom * aspectQuotient);
  }

  /**
   * Help function for calculating current zoom value in y-dimension
   * 
   * @param aspectQuotient
   *   (Aspect ratio content) / (Aspect ratio view)
   * @return Current zoom value in y-dimension
   */
  public float getZoomY(float aspectQuotient) {
   return Math.min(mZoom, mZoom / aspectQuotient);
  }

  /**
   * Set pan-x
   * 
   * @param panX
   *   Pan-x value to set
   */
  public void setPanX(float panX) {
   if (panX != mPanX) {
    mPanX = panX;
    setChanged();
   }
  }

  /**
   * Set pan-y
   * 
   * @param panY
   *   Pan-y value to set
   */
  public void setPanY(float panY) {
   if (panY != mPanY) {
    mPanY = panY;
    setChanged();
   }
  }

  /**
   * Set zoom
   * 
   * @param zoom
   *   Zoom value to set
   */
  public void setZoom(float zoom) {
   if (zoom != mZoom) {
    mZoom = zoom;
    setChanged();
   }
  }
 }
}

3.工程主文件MainActivity.java代码:

package com.ymw.zoomimage;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;

public class MainActivity extends Activity {

 private ZoomImageView zoomImg;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  zoomImg = (ZoomImageView) findViewById(R.id.image);
  Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
    R.drawable.a);
  zoomImg.setImage(bitmap);

 }
}

以上就是Android多点触摸放大缩小图片的示例代码,希望对大家的学习有所帮助。


代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!