当前位置： 移动技术网 > 移动技术>移动开发>Android > Android多点触控实现图片自由缩放

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

1、scalegesturedetector
2、onscalegesturelistener
3、matrix
4、ontouchlistener

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

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

1、 imageview的基础上继承

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

注册ongloballayoutlistener接口：

 @override
protected void onattachedtowindow() {
  super.onattachedtowindow();
  //注册 ongloballayoutlistener
  getviewtreeobserver().addongloballayoutlistener(this);
}

@override
protected void ondetachedfromwindow() {
  super.ondetachedfromwindow();
  //注销 ongloballayoutlistener
  getviewtreeobserver().removeongloballayoutlistener(this);
}

实现ongloballayout方法

@override
public 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 对象。

@override
public boolean ontouch(view view, motionevent motionevent) {
  //将触摸事件传递给scalegesture
  mscalegesturedetector.ontouchevent(motionevent);
  return true;
}
  //设置监听
  setontouchlistener(this);

5、onscalegesturelistener 中的重要方法了

 //使用scalegesturelistener去实现多点触控
@override
public 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网