Android实现多点触控，自由缩放图片

Android多点触控涉及到的知识点

1、ScaleGestureDetector
2、OnScaleGestureListener
3、Matrix
4、OnTouchListener

四个知识点需要了解一下，需要注意的是Matrix在内存中是一个一维数组，操控图片的Matrxi是一个3X3的矩阵，在内存中也就是一个大小为9的一维数组。

实现多点触控，自由变化图片

1、 ImageView的基础上继承

2、因为要在图片加载完成就获取到相关的属性，所以实现OnGlobalLayoutListener接口，并实现方法onGlobalLayout

注册OnGlobalLayoutListener接口： @Overrideprotected void onAttachedToWindow() {    super.onAttachedToWindow();    //注册 OnGlobalLayoutListener    getViewTreeObserver().addOnGlobalLayoutListener(this);}@Overrideprotected void onDetachedFromWindow() {    super.onDetachedFromWindow();    //注销 OnGlobalLayoutListener    getViewTreeObserver().removeOnGlobalLayoutListener(this);}实现onGlobalLayout方法 @Overridepublic void onGlobalLayout() {    //因为要在加载完成的时候就获取到图片的宽高 然后让图片的宽高去适应控件的宽高大小  isOnce只在第一次加载到时候处理    if (isOnce) {        //下一步3 获取相关属性  并做处理        isOnce = false;    }

}

3、

 //获取控件的宽高  int width = getWidth();     int height = getHeight();     //获取图片     Drawable drawable = getDrawable();     if (null == drawable) {         return;     }     //获取到图片的宽高  **根据drawable的这两个方法获取     int dw = drawable.getIntrinsicWidth();     int dh = drawable.getIntrinsicHeight();//定义一个图片缩放值 float scale = 1.0f;接下来就是根据图片的宽和高  控件的宽和高 去设置这个scale值 //当图片的宽大于了控件的宽  图片的高小于控件的高if (dw > width && dh < height) {        scale = width * 1.0f / dw;    }    //当图片的宽小于了控件的宽  图片的高大于控件的高if (dw < width && dh > height) {      scale = height * 1.0f / dh;  }if ((dw > width && dh > height) || (dw < width && dh < height)) {    scale = Math.min((width * 1.0f / dw), (height * 1.0f / dh));}//初始化三个缩放的值        mInitScale = scale;//正常情况下的 缩放值        mMidScale = scale * 2; //        mMaxScale = scale * 4;//最大的缩放值 //将图片初始化加载到控件的正中心位置        //计算横纵需要移动的偏移值        float dx = getWidth() / 2f - dw / 2f;        float dy = getHeight() / 2f - dh / 2f;        //使用矩阵控制图片的平移和缩放        mMatrix.postTranslate(dx, dy);        //缩放的时候要指定缩放基准点        mMatrix.postScale(mInitScale, mInitScale, getWidth() / 2f, getHeight() / 2f);        //通过设置Matrix改变ImageView        setImageMatrix(mMatrix);

4、接下来就是ScaleGestureDetector

//初始化 this是OnScaleGestureListener 对象 mScaleGestureDetector = new ScaleGestureDetector(context, this);     //要通过ScaleGestureDetector去操控触摸事件，那还要实现OnTouchListener接口并实现onTouch方法，在该方法中将触摸事件传递给mScaleGestureDetector 对象。@Overridepublic boolean onTouch(View view, MotionEvent motionEvent) {    //将触摸事件传递给ScaleGesture    mScaleGestureDetector.onTouchEvent(motionEvent);    return true;}    //设置监听    setOnTouchListener(this);

5、OnScaleGestureListener 中的重要方法了

 //使用ScaleGestureListener去实现多点触控@Overridepublic boolean onScale(ScaleGestureDetector scaleGestureDetector) {    if (null == getDrawable()) {        return true;    }//下一步6 处理return true;}

6、

 //缩放中    //获取当前图片缩放scale    float scale = getCurrentScale();    //获取缩放因子    float scaleFactor = scaleGestureDetector.getScaleFactor();    //缩放值达到最大和最小的情况 scaleFactor>1表示正在放大 <1表示正在缩小    if ((scale < mMaxScale && scaleFactor > 1.0f) || scale > mInitScale && scaleFactor < 1.0f) {        if (scale * scaleFactor < mInitScale) {            scaleFactor = mInitScale / scale;        } else if (scale * scaleFactor > mMaxScale) {            scaleFactor = mMaxScale / scale;        }    }    //根据缩放因子去设置图片的缩放  根据多点的中心去缩放 scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY()缩放中心点一定是手指触摸的中心点        mMatrix.postScale(scaleFactor, scaleFactor, scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY());    //因为缩放的中心点会改变  所以要控制图片的边界处理*** 如果不处理，中心点会根据你手指位置的不同发生改变，那么图片位置会错乱    checkoutBounds(); //下一步 7    setImageMatrix(mMatrix);

7、checkoutBounds()

 private void checkoutBounds() {    //通过矩阵要获取到缩放后图片的大小和坐标    Drawable drawable = getDrawable();    if (null != drawable) {        RectF rectF = getScaleMatrix(drawable); //下一步 8        //获取控件的宽高        int width = getWidth();        int height = getHeight();        //声明 x y偏移值 如果偏离了控件需要移动回去        float detalX = 0;        float detalY = 0;        if (rectF.width() >= width) {            //图片的宽大于等于了控件的宽，为了让宽留白边，计算出应该左右移动的偏移值            if (0 < rectF.left) {                //左边留空白了 那就应该像左移动                detalX = -rectF.left;            } else if (rectF.right < width) {                detalX = width - rectF.right;            }        }        //高度控制        if (rectF.height() >= height) {            if (0 < rectF.top) {                detalY = -rectF.top;            } else if (rectF.bottom < height) {                detalY = height - rectF.bottom;            }        }        //图片宽和高小于控件宽高的情况，让图片居中显示        if (rectF.width() < width) {            //计算偏移值            detalX = width / 2f - rectF.right + rectF.width() / 2f;        }        if (rectF.height() < height) {            detalY = height / 2f - rectF.bottom + rectF.height() / 2f;        }        mMatrix.postTranslate(detalX, detalY);}

8、getScaleMatrix(drawable) 该方法其他地方也可以效仿**

//通过矩阵 去获取到缩放后的图片的四个顶点坐标public RectF getScaleMatrix(Drawable drawable) {    Matrix matrix = mMatrix;    //图片的四个点坐标    RectF rectF = new RectF(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());    matrix.mapRect(rectF);    return rectF;}

通过该控件可以熟悉一下多点触控的实现 和图形矩阵的知识

Demo地址ZoomImageView