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>();}

监听触摸事件：

@Overridepublic 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()方法：

@Overrideprotected 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);}}