zoukankan      html  css  js  c++  java
  • Android多点触控MultiTouch浅析

    申明:

    参考:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/0226/914.html

    下面实现如何通过应用层支持多点触控操作,对于常规的控件触控操实现onTouchEvent()方法来处理。同时对onTouchEvent方法的参数MotionEvent进行一些了解。


    正文:

    下面会用两个应用示例来初步学习一下Android中的多点触控。


    示例一(DemoMultiTouch-Canvas):

    核心技术介绍

    本示例是在SurfaceView中利用Canvas来展示用户的多点触控,不过核心技术还是一个常见的方法:onTouchEvent(MotionEvent event)

    MotionEvent有以下几个方法需要大家注意一下,不过了是一些常见的方法,如果你onTouchEvent使用得多的话。

    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()); // 总共按下时花费时间


    代码展示:

    public class MTView extends SurfaceView implements SurfaceHolder.Callback {
    
    	private static final int MAX_TOUCHPOINTS = 10;
    	private static final String START_TEXT = "请随便触摸屏幕进行测试";
    	private Paint textPaint = new Paint();
    	private Paint touchPaints[] = new Paint[MAX_TOUCHPOINTS];
    	private int colors[] = new int[MAX_TOUCHPOINTS];
    
    	private int width, height;
    	private float scale = 1.0f;
    
    	public MTView(Context context) {
    		super(context);
    		SurfaceHolder holder = getHolder();
    		holder.addCallback(this);
    		setFocusable(true); // 确保我们的View能获得输入焦点
    		setFocusableInTouchMode(true); // 确保能接收到触屏事件
    		init();
    	}
    
    	private void init() {
    		// 初始化10个不同颜色的画笔
    		textPaint.setColor(Color.WHITE);
    		colors[0] = Color.BLUE;
    		colors[1] = Color.RED;
    		colors[2] = Color.GREEN;
    		colors[3] = Color.YELLOW;
    		colors[4] = Color.CYAN;
    		colors[5] = Color.MAGENTA;
    		colors[6] = Color.DKGRAY;
    		colors[7] = Color.WHITE;
    		colors[8] = Color.LTGRAY;
    		colors[9] = Color.GRAY;
    		for (int i = 0; i < MAX_TOUCHPOINTS; i++) {
    			touchPaints[i] = new Paint();
    			touchPaints[i].setColor(colors[i]);
    		}
    	}
    
    	/**
    	 * 处理触屏事件
    	 */
    	@Override
    	public boolean onTouchEvent(MotionEvent event) {
    		// 获得屏幕触点数量
    		int pointerCount = event.getPointerCount();
    		if (pointerCount > MAX_TOUCHPOINTS) {
    			pointerCount = MAX_TOUCHPOINTS;
    		}
    		
    		// 锁定Canvas,开始进行相应的界面处理
    		Canvas c = getHolder().lockCanvas();
    		if (c != null) {
    			c.drawColor(Color.BLACK);
    			if (event.getAction() == MotionEvent.ACTION_UP) {
    				// 当手离开屏幕时,清屏
    			} else {
    				// 在每一个触点上绘制一个十字和坐标信息
    				for (int i = 0; i < pointerCount; i++) {
    					int id = event.getPointerId(i);
    					int x = (int) event.getX(i);
    					int y = (int) event.getY(i);
    					drawCrosshairsAndText(x, y, touchPaints[id], i, id, c);
    				}
    				
    				// 在每一个触点上绘制一个圆
    				for (int i = 0; i < pointerCount; i++) {
    					int id = event.getPointerId(i);
    					int x = (int) event.getX(i);
    					int y = (int) event.getY(i);
    					drawCircle(x, y, touchPaints[id], c);
    				}
    			}
    			
    			// 画完后,unlock
    			getHolder().unlockCanvasAndPost(c);
    		}
    		return true;
    	}
    
    	/**
    	 * 画十字及坐标信息
    	 * 
    	 * @param x
    	 * @param y
    	 * @param paint
    	 * @param ptr
    	 * @param id
    	 * @param c
    	 */
    	private void drawCrosshairsAndText(int x, int y, Paint paint, int ptr,
    			int id, Canvas c) {
    		c.drawLine(0, y, width, y, paint);
    		c.drawLine(x, 0, x, height, paint);
    		int textY = (int) ((15 + 20 * ptr) * scale);
    		c.drawText("x" + ptr + "=" + x, 10 * scale, textY, textPaint);
    		c.drawText("y" + ptr + "=" + y, 70 * scale, textY, textPaint);
    		c.drawText("id" + ptr + "=" + id, width - 55 * scale, textY, textPaint);
    	}
    
    	/**
    	 * 画圆
    	 * 
    	 * @param x
    	 * @param y
    	 * @param paint
    	 * @param c
    	 */
    	private void drawCircle(int x, int y, Paint paint, Canvas c) {
    		c.drawCircle(x, y, 40 * scale, paint);
    	}
    
    	/**
    	 * 进入程序时背景画成黑色,然后把START_TEXT写到屏幕
    	 */
    	public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    		this.width = width;
    		this.height = height;
    		if (width > height) {
    			this.scale = width / 480f;
    		} else {
    			this.scale = height / 480f;
    		}
    		textPaint.setTextSize(14 * scale);
    		Canvas c = getHolder().lockCanvas();
    		if (c != null) {
    			c.drawColor(Color.BLACK);
    			float tWidth = textPaint.measureText(START_TEXT);
    			c.drawText(START_TEXT, width / 2 - tWidth / 2, height / 2, textPaint);
    			getHolder().unlockCanvasAndPost(c);
    		}
    	}
    
    	public void surfaceCreated(SurfaceHolder holder) {
    	}
    
    	public void surfaceDestroyed(SurfaceHolder holder) {
    	}
    }


    使用上也是so easy:

    setContentView(new MTView(this));


    运行效果图:



    示例二(DemoMultiTouch-ImageView):

    通过多点触屏放大或缩小图像 beforeLenght用来保存前一时间两点之间的距离 afterLenght用来保存当前时间两点之间的距离

    public void scaleWithFinger(MotionEvent event) {
    			float moveX = event.getX(1) - event.getX(0);
    			float moveY = event.getY(1) - event.getY(0);
    
    			switch (event.getAction()) {
    			case MotionEvent.ACTION_DOWN:
    				beforeLenght = (float) Math.sqrt((moveX * moveX)
    						+ (moveY * moveY));
    				break;
    			case MotionEvent.ACTION_MOVE:
    				// 得到两个点之间的长度
    				afterLenght = (float) Math.sqrt((moveX * moveX)
    						+ (moveY * moveY));
    
    				float gapLenght = afterLenght - beforeLenght;
    
    				if (gapLenght == 0) {
    					break;
    				}
    
    				// 如果当前时间两点距离大于前一时间两点距离,则传0,否则传1
    				if (gapLenght > 0) {
    					this.setScale(scale, 0);
    				} else {
    					this.setScale(scale, 1);
    				}
    
    				beforeLenght = afterLenght;
    				break;
    			}
    		}
    	}


    让图片跟随手指触屏的位置移动 beforeX、Y是用来保存前一位置的坐标 afterX、Y是用来保存当前位置的坐标。它们的差值就是ImageView各坐标的增加或减少值。

    public void moveWithFinger(MotionEvent event) {
    
    			switch (event.getAction()) {
    
    			case MotionEvent.ACTION_DOWN:
    				beforeX = event.getX();
    				beforeY = event.getY();
    				break;
    			case MotionEvent.ACTION_MOVE:
    				afterX = event.getX();
    				afterY = event.getY();
    
    				this.setLocation((int) (afterX - beforeX),
    						(int) (afterY - beforeY));
    
    				beforeX = afterX;
    				beforeY = afterY;
    				break;
    
    			case MotionEvent.ACTION_UP:
    				break;
    			}
    		}


    用来放大缩小ImageView 因为图片是填充ImageView的,所以也就有放大缩小图片的效果 flag为0是放大图片,为1是缩小图片

    private void setScale(float temp, int flag) {
    
    			if (flag == 0) {
    				this.setFrame(this.getLeft() - (int) (temp * this.getWidth()),
    						this.getTop() - (int) (temp * this.getHeight()),
    						this.getRight() + (int) (temp * this.getWidth()),
    						this.getBottom() + (int) (temp * this.getHeight()));
    			} else {
    				this.setFrame(this.getLeft() + (int) (temp * this.getWidth()),
    						this.getTop() + (int) (temp * this.getHeight()),
    						this.getRight() - (int) (temp * this.getWidth()),
    						this.getBottom() - (int) (temp * this.getHeight()));
    			}
    		}


    onTouchEvent事件则如下:

    public boolean onTouchEvent(MotionEvent event) {
    		if (inView(imageView, event)) {
    			if (event.getPointerCount() == 2) {
    				imageView.scaleWithFinger(event);
    			} else if (event.getPointerCount() == 1) {
    				imageView.moveWithFinger(event);
    			}
    		}
    		return true;
    	}

    源码下载:

    http://download.csdn.net/detail/u013761665/8719349

  • 相关阅读:
    js 时间相关函数
    javascript面向对象:继承、多态
    面向对象相关
    reset.css css重置公共样式
    开通博客园第一天。
    vue 和 react 路由跳转和传参
    前端密码加密方式
    react组件回顶部
    移动端使用rem方法
    用rekit创建react项目
  • 原文地址:https://www.cnblogs.com/fengju/p/6336089.html
Copyright © 2011-2022 走看看