41.Android之图片放大缩小学习

生活中经常会用到图片放大和缩小，今天简单学习下.

思路：1.添加一个操作图片放大和缩小类;  2. 布局文件中引用这个自定义控件;  3. 主Activity一些修改. 代码如下：

增加图片操作类：

 package com.example.imagezoomdemo;

 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 zoomimage 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 zoomimage(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();
             }
         }
     }
 }

布局修改：

 <?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.example.imagezoomdemo.zoomimage
         android:id="@+id/image"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" >
     </com.example.imagezoomdemo.zoomimage>

 </LinearLayout>

最后修改下Activity:

 package com.example.imagezoomdemo;

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

 public class MainActivity extends Activity {

      private zoomimage zoomImg;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

          zoomImg = (zoomimage) findViewById(R.id.image);
             Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
                     R.drawable.aa);
             zoomImg.setImage(bitmap);
     }

 }

运行效果：

(1)原图：

(2) 放大：

(3) 缩小