Android简单涂鸦以及撤销、重做的实现方法

78 阅读 0 评论 52 点赞

我是靠谱客的博主腼腆荷花，最近开发中收集的这篇文章主要介绍Android简单涂鸦以及撤销、重做的实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前段时间研究了下涂鸦功能的实现，其实单独的涂鸦实现起来还是挺简单的，关键的技术难点是撤销与重做功能的实现。但是这里暂时只说明下涂鸦功能的实现，高手勿喷哈，而且该功能在Android SDK提供的APIDemo当中就有的，但是如果能够将该地方的知识点搞懂的话，我认为View画图基本上是难不倒你了，特别是里面为什么要用一个中间的Bitmap。老规矩，还是先看看效果图吧：

代码如下:

package cn.ych.tuya;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Bitmap.CompressFormat;
import android.os.Environment;
import android.view.MotionEvent;
import android.view.View;
/**
*
* @category: View实现涂鸦、撤销以及重做功能
* @author: 锋翼
* @link: www.apkstory.com
* @date: 2012.1.4
*
*/
public class TuyaView extends View {
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mBitmapPaint;// 画布的画笔
private Paint mPaint;// 真实的画笔
private float mX, mY;//临时点坐标
private static final float TOUCH_TOLERANCE = 4;
private int screenWidth, screenHeight;// 屏幕長寬
public TuyaView(Context context, int w, int h) {
super(context);
screenWidth = w;
screenHeight = h;
mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
Bitmap.Config.ARGB_8888);
// 保存一次一次绘制出来的图形
mCanvas = new Canvas(mBitmap);
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘
mPaint.setStrokeCap(Paint.Cap.SQUARE);// 形状
mPaint.setStrokeWidth(5);// 画笔宽度
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawColor(0xFFAAAAAA);
// 将前面已经画过得显示出来
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
if (mPath != null) {
// 实时的显示
canvas.drawPath(mPath, mPaint);
}
}
private void touch_start(float x, float y) {
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(mY - y);
触摸间隔大于阈值才绘制路径
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
// 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的)
mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
}
}
private void touch_up() {
mPath.lineTo(mX, mY);
mCanvas.drawPath(mPath, mPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 每次down下去重新new一个Path
mPath = new Path();
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
}

复制代码

上一讲当中，已经讲解了普通View实现涂鸦的功能，现在再来给涂鸦添加上撤销与重做的功能吧。撤销与重做在很多地方都是很重要的功能，比如PS里面、Word里面等等，而且大部分童鞋都能够想到要实现该功能应该需要用到堆栈，对于一些大牛的话可能就直接想到设计模式上面去了，比如命令模式就可以解决撤销与重做的问题。我们这里要讲解的是利用集合来完成该功能，其实也就是模拟栈，我相信你懂得。

老规矩，先上效果图:
代码如下: