Android实现多点触控,自由缩放图片的实例代码
Android多点触控涉及到的知识点
1、ScaleGestureDetector
2、OnScaleGestureListener
3、Matrix
4、OnTouchListener
四个知识点需要了解一下,需要注意的是Matrix在内存中是一个一维数组,操控图片的Matrxi是一个3X3的矩阵,在内存中也就是一个大小为9的一维数组。
实现多点触控,自由变化图片
1、ImageView的基础上继承
2、因为要在图片加载完成就获取到相关的属性,所以实现OnGlobalLayoutListener接口,并实现方法onGlobalLayout
注册OnGlobalLayoutListener接口:
@Override
protectedvoidonAttachedToWindow(){
super.onAttachedToWindow();
//注册OnGlobalLayoutListener
getViewTreeObserver().addOnGlobalLayoutListener(this);
}
@Override
protectedvoidonDetachedFromWindow(){
super.onDetachedFromWindow();
//注销OnGlobalLayoutListener
getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
实现onGlobalLayout方法
@Override
publicvoidonGlobalLayout(){
//因为要在加载完成的时候就获取到图片的宽高然后让图片的宽高去适应控件的宽高大小isOnce只在第一次加载到时候处理
if(isOnce){
//下一步3获取相关属性并做处理
isOnce=false;
}
}
3、
//获取控件的宽高
intwidth=getWidth();
intheight=getHeight();
//获取图片
Drawabledrawable=getDrawable();
if(null==drawable){
return;
}
//获取到图片的宽高**根据drawable的这两个方法获取
intdw=drawable.getIntrinsicWidth();
intdh=drawable.getIntrinsicHeight();
//定义一个图片缩放值
floatscale=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;//最大的缩放值
//将图片初始化加载到控件的正中心位置
//计算横纵需要移动的偏移值
floatdx=getWidth()/2f-dw/2f;
floatdy=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=newScaleGestureDetector(context,this);
//要通过ScaleGestureDetector去操控触摸事件,那还要实现OnTouchListener接口并实现onTouch方法,在该方法中将触摸事件传递给mScaleGestureDetector对象。
@Override
publicbooleanonTouch(Viewview,MotionEventmotionEvent){
//将触摸事件传递给ScaleGesture
mScaleGestureDetector.onTouchEvent(motionEvent);
returntrue;
}
//设置监听
setOnTouchListener(this);
5、OnScaleGestureListener中的重要方法了
//使用ScaleGestureListener去实现多点触控
@Override
publicbooleanonScale(ScaleGestureDetectorscaleGestureDetector){
if(null==getDrawable()){
returntrue;
}
//下一步6处理
returntrue;
}
6、
//缩放中
//获取当前图片缩放scale
floatscale=getCurrentScale();
//获取缩放因子
floatscaleFactor=scaleGestureDetector.getScaleFactor();
//缩放值达到最大和最小的情况scaleFactor>1表示正在放大<1表示正在缩小
if((scale<mMaxScale&&scaleFactor>1.0f)||scale>mInitScale&&scaleFactor<1.0f){
if(scale*scaleFactor<mInitScale){
scaleFactor=mInitScale/scale;
}elseif(scale*scaleFactor>mMaxScale){
scaleFactor=mMaxScale/scale;
}
}
//根据缩放因子去设置图片的缩放根据多点的中心去缩放scaleGestureDetector.getFocusX(),scaleGestureDetector.getFocusY()缩放中心点一定是手指触摸的中心点
mMatrix.postScale(scaleFactor,scaleFactor,scaleGestureDetector.getFocusX(),scaleGestureDetector.getFocusY());
//因为缩放的中心点会改变所以要控制图片的边界处理***如果不处理,中心点会根据你手指位置的不同发生改变,那么图片位置会错乱
checkoutBounds();//下一步7
setImageMatrix(mMatrix);
7、checkoutBounds()
privatevoidcheckoutBounds(){
//通过矩阵要获取到缩放后图片的大小和坐标
Drawabledrawable=getDrawable();
if(null!=drawable){
RectFrectF=getScaleMatrix(drawable);//下一步8
//获取控件的宽高
intwidth=getWidth();
intheight=getHeight();
//声明xy偏移值如果偏离了控件需要移动回去
floatdetalX=0;
floatdetalY=0;
if(rectF.width()>=width){
//图片的宽大于等于了控件的宽,为了让宽留白边,计算出应该左右移动的偏移值
if(0<rectF.left){
//左边留空白了那就应该像左移动
detalX=-rectF.left;
}elseif(rectF.right<width){
detalX=width-rectF.right;
}
}
//高度控制
if(rectF.height()>=height){
if(0<rectF.top){
detalY=-rectF.top;
}elseif(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)该方法其他地方也可以效仿
//通过矩阵去获取到缩放后的图片的四个顶点坐标
publicRectFgetScaleMatrix(Drawabledrawable){
Matrixmatrix=mMatrix;
//图片的四个点坐标
RectFrectF=newRectF(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
matrix.mapRect(rectF);
returnrectF;
}
通过该控件可以熟悉一下多点触控的实现和图形矩阵的知识
Demo地址:ZoomImageView
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。