自定义View之多点触控之双指放大与缩小

        本文是介绍多点触控其中介绍了多点触控的参数......

 具体如下：

   理论上，Android系统本身可以处理多达256个手指的触摸，这主要取决于手机硬件的支持。当然，支持多点触摸的手机，也不会支持这么多点，一般是支持2个点或者4个点。

     在实现多点触控中：  

      首先要实现OnTouchListener接口，然后重写方法：

      public boolean onTouch(View v, MotionEvent event);

      从这个方法中我们就可以获取实现两指缩放功能的全部信息。

       View v是触发事件的源，MotionEvent event即一个触摸事件。对屏幕的几乎所有操作都会触发事件，如点击、放开、滑动等。

       不同的事件在MotionEvent中有不同的id，我们可以根据event.getAction() & MotionEvent.ACTION_MASK的结果来判断是何种事件。

有如下事件使我们要用到的：

• MotionEvent.ACTION_DOWN：在第一个点被按下时触发

• MotionEvent.ACTION_UP:当屏幕上唯一的点被放开时触发

• MotionEvent.ACTION_POINTER_DOWN:当屏幕上已经有一个点被按住，此时再按下其他点时触发。

• MotionEvent.ACTION_POINTER_UP:当屏幕上有多个点被按住，松开其中一个点时触发（即非最后一个点被放开时）。

• MotionEvent.ACTION_MOVE： 当有点在屏幕上移动时触发。值得注意的是，由于它的灵敏度很高，而我们的手指又不可能完全静止（即使我们感觉不到移动，但其实我们的手指也在不停地抖 动），所以实际的情况是，基本上只要有点在屏幕上，此事件就会一直不停地被触发。

• event.getAction() //获取触控动作比如ACTION_DOWN
  event.getPointerCount(); //获取触控点的数量，比如2则可能是两个手指同时按压屏幕
  event.getPointerId(nID); //对于每个触控的点的细节，我们可以通过一个循环执行getPointerId方法获取索引
  event.getX(nID); //获取第nID个触控点的x位置
  event.getY(nID); //获取第nID个点触控的y位置
  event.getPressure(nID); //LCD可以感应出用户的手指压力，当然具体的级别由驱动和物理硬件决定的
  event.getDownTime() //按下开始时间
  event.getEventTime() // 事件结束时间
  event.getEventTime()-event.getDownTime()); //总共按下时花费时间

      举 例子来说：当我们放一个食指到屏幕上时，触发ACTION_DOWN事件；再放一个中指到屏幕上，触发ACTION_POINTER_DOWN事件；此时 再把食指或中指放开，都会触发ACTION_POINTER_UP事件；再放开最后一个手指，触发ACTION_UP事件；而同时在整个过程 中，ACTION_MOVE事件会一直不停地被触发。

       event.getX(index)和event.getY(index)可以获取到指定index点的坐标，所以当屏幕上有两个点的时候，我们用如下方法来获取两点间的距离：

       private float spacing(MotionEvent event) { 
              float x = event.getX(0) - event.getX(1); 
              float y = event.getY(0) - event.getY(1); 
           return FloatMath.sqrt(x * x + y * y); 
       } 

代码如下：

// import略  
public class ImageViewerActivity extends Activity implements OnTouchListener { 

    private ImageView mImageView; 

    private Matrix matrix = new Matrix(); 
    private Matrix savedMatrix = new Matrix(); 

    private static final int NONE = 0; 
    private static final int DRAG = 1; 
    private static final int ZOOM = 2; 
    private int mode = NONE; 

    // 第一个按下的手指的点  
    private PointF startPoint = new PointF(); 
    // 两个按下的手指的触摸点的中点  
    private PointF midPoint = new PointF(); 
    // 初始的两个手指按下的触摸点的距离  
    private float oriDis = 1f; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        this.setContentView(R.layout.imageviewer); 
        mImageView = (ImageView) this.findViewById(R.id.imageView); 
        mImageView.setOnTouchListener(this); 
    } 

    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
        ImageView view = (ImageView) v; 

        // 进行与操作是为了判断多点触摸  
        switch (event.getAction() & MotionEvent.ACTION_MASK) { 
        case MotionEvent.ACTION_DOWN: 
            // 第一个手指按下事件  
            matrix.set(view.getImageMatrix()); 
            savedMatrix.set(matrix); 
            startPoint.set(event.getX(), event.getY()); 
            mode = DRAG; 
            break; 
        case MotionEvent.ACTION_POINTER_DOWN: 
            // 第二个手指按下事件  
            oriDis = distance(event); 
            if (oriDis > 10f) { 
                savedMatrix.set(matrix); 
                midPoint = middle(event); 
                mode = ZOOM; 
            } 
            break; 
        case MotionEvent.ACTION_UP: 
        case MotionEvent.ACTION_POINTER_UP: 
            // 手指放开事件  
            mode = NONE; 
            break; 
        case MotionEvent.ACTION_MOVE: 
            // 手指滑动事件  
            if (mode == DRAG) { 
                // 是一个手指拖动  
                matrix.set(savedMatrix); 
                matrix.postTranslate(event.getX() - startPoint.x, event.getY() 
                        - startPoint.y); 
            } else if (mode == ZOOM) { 
                // 两个手指滑动  
                float newDist = distance(event); 
                if (newDist > 10f) { 
                    matrix.set(savedMatrix); 
                    float scale = newDist / oriDis; 
                    matrix.postScale(scale, scale, midPoint.x, midPoint.y); 
                } 
            } 
            break; 
        } 

        // 设置ImageView的Matrix  
        view.setImageMatrix(matrix); 
        return true; 
    } 

    // 计算两个触摸点之间的距离  
    private float distance(MotionEvent event) { 
        float x = event.getX(0) - event.getX(1); 
        float y = event.getY(0) - event.getY(1); 
        return FloatMath.sqrt(x * x + y * y); 
    } 

    // 计算两个触摸点的中点  
    private PointF middle(MotionEvent event) { 
        float x = event.getX(0) + event.getX(1); 
        float y = event.getY(0) + event.getY(1); 
        return new PointF(x / 2, y / 2); 
    } 

} 

以下是布局文件。

代码如下:

 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent"> 
            android:id="@+id/imageView" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:src="@drawable/example" 
        android:scaleType="matrix" > 
     
 

在这段代码中，我们通过手指的操作来计算Matrix的值，然后设置图片的Matrix，实现图片的移动和缩放。

 

需要注意的是，在资源文件中，需要设置ImageView的scaleType为“matrix”

 

效果图如下：