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) 缩小