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

学习安卓手势滑动,多点触摸放大缩小图片,分享给大家供大家参考,具体代码如下
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多点触摸放大缩小图片的示例代码,希望对大家的学习有所帮助。

(0)

相关推荐

  • Android实现手势滑动和简单动画效果

    一.手势滑动 1.Activity都具有响应触摸事件,也就是说只要触摸Activity,他都会回调一个onTouchEvent()方法.但是在这个方法里无法处理事件,需要配合使用手势识别器(GestureDetector)中的方法onTouchEvent对事件(event)进行分析处理,我们只需要重写这个方法中的操作来达到我们的需求. /** * activity被触摸后,会回调此方法onTouchEvent,并回传一个event对象 * event对象封装了触摸时的动作信息,包括x.y坐标等等

  • Android自定义View实现随手势滑动控件

    本文控件为大家分享了Android随手势滑动控件的具体代码,供大家参考,具体内容如下 1.新建自定义控件类:MyView public class MyView extends Button{ //记录上次滑动后的坐标值 private int lastX; private int lastY; public MyView(Context context) { super(context); // TODO Auto-generated constructor stub } public MyV

  • Android实现手势滑动多点触摸放大缩小图片效果

    网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程: 首先ImageView是继承自View的子类. onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法. setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新

  • Android实现手势滑动多点触摸缩放平移图片效果

    现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位. 一.概述 想要做到图片支持多点触控,自由的进行缩放.平移,需要了解几个知识点:Matrix , GestureDetector , ScaleGestureDetector 以及事件分发机制,ps:不会咋办,不会你懂的. 1.Matrix 矩阵,看深入了都是3维矩阵的乘啊什么的,怪麻烦的~~ 其实这么了解下就行了: Matrix 数据结构:3维矩阵

  • android中view手势滑动冲突的解决方法

    Android手势事件的冲突跟点击事件的分发过程息息相关,由三个重要的方法来共同完成,分别是:dispatchTouchEvent.onInterceptTouchEvent和onTouchEvent. public boolean dispatchTouchEvent(MotionEvent ev) 这个方法用来进行事件的分发.如果事件传递到view,那么这个方法一定会被调用,返回结果受当前View的onTouchEvent和下级View的dispatchTouchEvent方法的影响,表示是

  • Android GestureDetector手势滑动使用实例讲解

    Gesture在 ViewGroup中使用 GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等. 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture处理 先来了解一下如何使用,后面会有示例: package com.example.y2222.myview; import android.content.Context; import android.ut

  • Android开发之实现手势滑动的功能

    Android开发之实现手势滑动的功能 首先得Activity必须实现OnGestureListener接口,该接口提供了关于手势操作的一些方法, onDown方法:onDown是,一旦触摸屏按下,就马上产生onDown事件 public boolean onDown(MotionEvent e) { return false; } onFling方法:当手在屏幕上滑动但手未离开屏幕时触发 MotionEvent e1 手开始触碰屏幕的位置的MotionEvent对象 MotionEvent e

  • Android手势滑动实现ImageView缩放图片大小

    本文推出了两种Android手势实现ImageView缩放图片大小的方法,分享给大家供大家参考,具体内容如下 方法一: 将以下代码写到MulitPointTouchListener.java中,然后对你相应的图片进行OnTouchListener. 例如:imageView.setOnTouchListener(new MulitPointTouchListener ()); 在xml中要将ImageView的缩放格式改成Matrix 例如:android:scaleType="matrix&q

  • Android实现手势滑动多点触摸缩放平移图片效果(二)

    上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android实现手势滑动多点触摸缩放平移图片效果,本篇继续完善我们的ImageView. 首先加入放大后的移动. 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Override public boolean onTouch(View v, MotionEvent event) { mScaleGestureDetector.onTouchEve

  • Android实现手势滑动识别功能

    对于Android中的手势识别可以从以下三个Listener入手--OnTouchListener.OnGestureListener.OnDoubleTapListener.这三个监听器分别是触摸监听.手势滑动监听和屏幕双击操作监听.很多的时候我们需要这些手势识别的操作,例如我们自定义控件的时候就经常会用到.下面就对这三个监听器分别进行介绍. 触摸监听器OnTouchListener 让我们的Activity去现实此接口,并重写onTouch方法.重写OnTouchListener的onTou

随机推荐