android图片涂鸦(标记)

相信很多人对类似于画板的应用并不陌生，分析其原理也很简单，画图，擦除...今天的示例也和画板有关,先上效果图：

主界面：一个图片，一个textView，点击图片后放大，出现两个按钮，点击标记按钮就可以对图片进行涂鸦，返回后图片回复正常大小，涂鸦的痕迹还留在上面。大概就这么多功能。

下面开始分析需求：

由于主要功能是涂鸦，所以先从第二张图开始，我们知道，实现画笔随着手指动的效果是要重写onDraw()方法的，因此我们可以写一个类继承RelativeLayout，具体见代码。然后再main.xml中定义此类,初始大小可以自定义，再通过点击此布局来切换图片的大小。

mRelativeLayout.java的主要代码：

初始化图片资源，画笔和点集合：

	private void setup() {
		setWillNotDraw(false);// 设置为false才可画图
		
		bitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.ic_launcher);

		paint = new Paint();
		paint.setColor(Color.RED);
		paint.setStrokeWidth(1);//画笔的宽度

		tracks = new ArrayList<Track>();
	}

监听触摸事件：

@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (isDrawable) {
			//当前为可画图
//			System.out.println("onTouch...");
			// 触发事件时获取当前坐标
			float xx = event.getX();
			float yy = event.getY();
			// 监听按下时的事件
			if (event.getAction() == MotionEvent.ACTION_DOWN) {
				// 监听抬起的事件
			} else if (event.getAction() == MotionEvent.ACTION_UP) {
				tracks.add(new Track(-1, -1));//手指抬起时加入断点
			}
			// 监听move的事件，text随着手势移动
			else if (event.getAction() == MotionEvent.ACTION_MOVE) {
				Track track = new Track(xx, yy);
				tracks.add(track);
			}
			invalidate();
			return true;
		} else if (scaleBig) {
			//图片为原来大小时
			setScaleX(1f);
			setScaleY(1f);
			scaleBig = false;
			MainActivity.btn.setVisibility(View.GONE);//按钮不可见
			MainActivity.clear.setVisibility(View.GONE);
		} else {
			//图片放大时
			setPivotX(0);//设置中心轴为(0,0)
			setPivotY(0);
			setScaleX(MainActivity.width / bitmap.getWidth());//放大比例
			setScaleY(MainActivity.height / bitmap.getHeight());

			MainActivity.btn.setVisibility(View.VISIBLE);//按钮可见
			MainActivity.clear.setVisibility(View.VISIBLE);
			scaleBig = true;
		}
		return super.onTouchEvent(event);
	}

重写onDraw()方法：

@Override
	protected void onDraw(Canvas canvas) {
//		System.out.println("onDraw()...");
		if (MainActivity.clearAll) {
			tracks.removeAll(tracks);//清空集合
			invalidate();
			MainActivity.clearAll = false;
			return;
		}
		for (int i = 0; i < tracks.size(); i++) {
			//画出所有的点,之间用直线连接(最好是用曲线,待优化)
			if (i != 0 && tracks.get(i - 1).x > 0 && tracks.get(i).x > 0) {
				//画点之间的直线(不包括断点)
				canvas.drawLine(tracks.get(i - 1).x, tracks.get(i - 1).y,
						tracks.get(i).x, tracks.get(i).y, paint);
			}
			//画出所有的点
			canvas.drawPoint(tracks.get(i).x, tracks.get(i).y, paint);
		}
	}