Android multi-touch realizes picture free scaling _android

Android Multi-point touch knowledge points

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

Four points of knowledge need to be aware 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 of 9 one-dimensional array.

Realize multi-touch, free change picture

1, ImageView on the basis of inheritance

2, because to get the relevant properties in the picture load completion, so implement the Ongloballayoutlistener interface and implement the method Ongloballayout

Register Ongloballayoutlistener Interface:

 @Override
protected void Onattachedtowindow () {
  super.onattachedtowindow ();
  Register Ongloballayoutlistener
  Getviewtreeobserver (). Addongloballayoutlistener (this);
}

@Override
protected void Ondetachedfromwindow () {
  super.ondetachedfromwindow ();
  Unregister Ongloballayoutlistener
  getviewtreeobserver (). Removeongloballayoutlistener (this);
}

Implement Ongloballayout method

@Override public
void Ongloballayout () {
//Because you want to get the width of the picture when the load is complete 

and then let the picture be wide and high to fit the width and height 

of the control Isonce only when the first load is processed
  if (isonce) {
    //Next 3 Gets the associated property and does the processing
    isonce = false;
  }

3,

 Gets the width-height int width = getwidth () of the control;
   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 Drawable's two methods;

int dh = drawable.getintrinsicheight ();

Defines a picture scaling value float scale = 1.0f; The next step is to set the scale value according to the width and height of the picture and/or when the picture is wider than the control's wide picture, the high if (DW > width && dh < height) {scale = WI
  DTH * 1.0F/DW;
 //When the picture is wider than the width of the control's 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 three scaled values Minitscale = scale;//normal scaling value Mmidscale = scale * 2;
    Mmaxscale = scale * 4;//maximum scaling value//The picture is initialized to the center position of the control//to calculate the offset value that needs to be moved by the vertical the float dx = getwidth ()/2f-dw/2f;
    float dy = getheight ()/2f-dh/2f; Use matrices to control the translation and scaling of pictures MMATRIX.POsttranslate (dx, dy);
    When scaling, specify the scaling datum point Mmatrix.postscale (Minitscale, Minitscale, getwidth ()/2f, getheight ()/2f);
 changing ImageView Setimagematrix (Mmatrix) by setting the matrix;

4, Next is Scalegesturedetector

Initialize this is the Onscalegesturelistener object
 mscalegesturedetector = new Scalegesturedetector (context, this);
 To manipulate the touch event through Scalegesturedetector,

It also implements the Ontouchlistener interface and implements the Ontouch method,

In this method, the touch event is passed to the Mscalegesturedetector object.

@Override Public
boolean Ontouch (View view, Motionevent motionevent) {
  //pass touch events to Scalegesture
  Mscalegesturedetector.ontouchevent (motionevent);
  return true;
}
  Set up listening
  setontouchlistener (this);

5, the important method in the Onscalegesturelistener

 Use Scalegesturelistener to implement multi-touch
@Override public
boolean Onscale (scalegesturedetector Scalegesturedetector) {
  if (null = = Getdrawable ()) {return
    true;
  }
Next 6 processing return

true;
}

6,

 Zoom in
  //Get current picture zoom scale
  Float scale = Getcurrentscale ();

  Get zoom factor
  Float scalefactor = Scalegesturedetector.getscalefactor ();
  Maximum and minimum scaling values scalefactor>1 indicates that the <1 is being zoomed out
  if ((Scale < Mmaxscale && scalefactor > 1.0f) | | SCA Le > Minitscale && scalefactor < 1.0f) {
    if (scale * Scalefactor < Minitscale) {
      scalefactor = MI Nitscale/scale;
    } else if (scale * scalefactor > Mmaxscale) {
      scalefactor = Mmaxscale/scale;
    }
  }

  Set the zoom factor to zoom Scalegesturedetector.getfocusx () according to the center of the Point, scalegesturedetector.getfocusy () The Zoom center point must be the center point of the finger touch

    Mmatrix.postscale (Scalefactor, Scalefactor, Scalegesturedetector.getfocusx (), Scalegesturedetector.getfocusy ());

  Because the center point of the zoom will change, so control the border of the picture * * If not, the center point will change according to the position of your finger, then the picture position will be
  checkoutbounds ();//Next 7
  Setimagematrix (Mmatrix);

7, Checkoutbounds ()

 private void Checkoutbounds () {//matrix to obtain the size and coordinates of the scaled picture drawable drawable = getdrawable ();
    if (null!= drawable) {RECTF RECTF = Getscalematrix (drawable);//Next 8//Get the control's width high int width = getwidth ();
    int height = getheight ();
    Declares an X Y offset value if the control needs to be moved back float detalx = 0;

    float detaly = 0; if (Rectf.width () >= width) {//Picture is wider than the width of the control, in order to allow wide white edges, calculate the offset value that should move around if (0 < Rectf.left) {//left blank
      White It should be like the left move detalx =-rectf.left;
      else if (Rectf.right < width) {detalx = Width-rectf.right;
      }//Height control if (rectf.height () >= height) {if (0 < rectf.top) {detaly =-rectf.top;
      else if (Rectf.bottom < height) {detaly = Height-rectf.bottom; }//Picture width and height is less than the width of the control, so that the picture center display if (Rectf.width () < width) {//Calculate the 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) The method can also be emulated elsewhere

Through the matrix to obtain the scaled picture of the four vertex coordinates public
RECTF Getscalematrix (drawable drawable) {
  Matrix matrix = Mmatrix;
  Picture of the four-point coordinate
  rectf RECTF = new RECTF (0, 0, drawable.getintrinsicwidth (), Drawable.getintrinsicheight ());
  Matrix.maprect (RECTF);
  return RECTF;
}

Through this control can be familiar with the implementation of multi-touch and graphics matrix knowledge

Demo Address Zoomimageview

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.