Android for multi-touch, free zoom image

Knowledge points involved in Android multi-touch

1, Scalegesturedetector
2, Onscalegesturelistener
3. Matrix
4, Ontouchlistener

Four knowledge points need to understand, it should be noted that the matrix in memory is a one-dimensional array, manipulating the image of the matrxi is a 3x3 matrix, in memory is a size 9 of a one-dimensional array.

Achieve multi-touch, free-change images

1, ImageView on the basis of inheritance

2, because to obtain the relevant properties in the picture loading completes, therefore implements the Ongloballayoutlistener interface, and implements the method 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.

 Gets the width of the control's height int width = getwidth ();     int height = getheight ();     Get picture drawable drawable = getdrawable ();     if (null = = drawable) {return;     }//Get to the width of the picture * * Get int DW = Drawable.getintrinsicwidth () According to the two methods of drawable; int dh = drawable.getintrinsicheight ();//define a picture scaling value float scale = 1.0f; The next step is to set the value of the magnitude//when the image is wider than the width of the control, depending on the width and height of the picture.    The GAO Xiao of the control is high if (DW > width && dh < height) {scale = width * 1.0F/DW;  }//When the width of the picture is less than the height of the control's wide picture of the high 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));} Initializes a value of three zoom Minitscale = scale;//normal scaling value Mmidscale = scale * 2; Mmaxscale = scale * 4;//Maximum zoom value//To load the image initialization into the control's positive center position//calculates the offset value that the transverse needs to move float DX = getwidth ()/2F-DW        /2f;        float dy = getheight ()/2f-dh/2f; MakeUse matrix to control the panning and zooming of the picture mmatrix.posttranslate (dx, dy);        To specify the scaling datum point Mmatrix.postscale (Minitscale, Minitscale, getwidth ()/2f, getheight ()/2f); Change ImageView Setimagematrix (Mmatrix) by setting the matrix;

4. Next is 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. The important method in 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 () {//through the matrix to get to the size and coordinates of the scaled picture drawable drawable = getdrawable (); if (null! = drawable) {RECTF RECTF = Getscalematrix (drawable);//Next 8//Get the control's wide height int width = Getwidt        H ();        int height = getheight ();        Declares the X Y offset value if the control needs to be moved back to float detalx = 0;        float detaly = 0;                if (Rectf.width () >= width) {//The image is wider than the width of the control, in order for the width to remain white, the offset value that should move left and right should be calculated if (0 < Rectf.left) {            Left blank, that should be like moving left detalx =-rectf.left;            } else if (Rectf.right < width) {detalx = Width-rectf.right; }}//Height control if (rectf.height () >= height) {if (0 < rectf.top) {Detal            Y =-rectf.top;            } else if (Rectf.bottom < height) {detaly = Height-rectf.bottom; }}//Picture width and height less than control height, let the picture center display if (Rectf.width () < width) {//Calculate offset value 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) This method can also be replicated elsewhere * *

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

This control allows you to familiarize yourself with the implementation of multi-touch and the knowledge of the graphics matrix.

Demo Address Zoomimageview

Android for multi-touch, free zoom image