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

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


代码如下:

  1. package cn.ych.tuya;
  3. import java.io.File;
  4. import java.io.FileNotFoundException;
  5. import java.io.FileOutputStream;
  6. import java.io.IOException;
  7. import java.util.ArrayList;
  8. import java.util.Iterator;
  9. import java.util.List;
  11. import android.content.Context;
  12. import android.graphics.Bitmap;
  13. import android.graphics.Canvas;
  14. import android.graphics.Paint;
  15. import android.graphics.Path;
  16. import android.graphics.Bitmap.CompressFormat;
  17. import android.os.Environment;
  18. import android.view.MotionEvent;
  19. import android.view.View;
  20. /**
  21. *
  22. * @category: View实现涂鸦、撤销以及重做功能
  23. * @author: 锋翼
  24. * @link: www.apkstory.com
  25. * @date: 2012.1.4
  26. *
  27. */
  28. public class TuyaView extends View {
  30. private Bitmap mBitmap;
  31. private Canvas mCanvas;
  32. private Path mPath;
  33. private Paint mBitmapPaint;// 画布的画笔
  34. private Paint mPaint;// 真实的画笔
  35. private float mX, mY;//临时点坐标
  36. private static final float TOUCH_TOLERANCE = 4;
  38. private int screenWidth, screenHeight;// 屏幕長寬
  40. public TuyaView(Context context, int w, int h) {
  41.   super(context);
  42.   screenWidth = w;
  43.   screenHeight = h;
  45.   mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
  46.     Bitmap.Config.ARGB_8888);
  47.   // 保存一次一次绘制出来的图形
  48.   mCanvas = new Canvas(mBitmap);
  50.   mBitmapPaint = new Paint(Paint.DITHER_FLAG);
  51.   mPaint = new Paint();
  52.   mPaint.setAntiAlias(true);
  53.   mPaint.setStyle(Paint.Style.STROKE);
  54.   mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘
  55.   mPaint.setStrokeCap(Paint.Cap.SQUARE);// 形状
  56.   mPaint.setStrokeWidth(5);// 画笔宽度
  58. }
  60. @Override
  61. public void onDraw(Canvas canvas) {
  62.   canvas.drawColor(0xFFAAAAAA);
  63.   // 将前面已经画过得显示出来
  64.   canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
  65.   if (mPath != null) {
  66.    // 实时的显示
  67.    canvas.drawPath(mPath, mPaint);
  68.   }
  69. }
  71. private void touch_start(float x, float y) {
  72.   mPath.moveTo(x, y);
  73.   mX = x;
  74.   mY = y;
  75. }
  77. private void touch_move(float x, float y) {
  78.   float dx = Math.abs(x - mX);
  79.   float dy = Math.abs(mY - y);
  81.   触摸间隔大于阈值才绘制路径
  82.   if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
  83.    // 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的)
  84.    mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
  85.    mX = x;
  86.    mY = y;
  87.   }
  88. }
  90. private void touch_up() {
  91.   mPath.lineTo(mX, mY);
  92.   mCanvas.drawPath(mPath, mPaint);
  93.   }
  95. @Override
  96. public boolean onTouchEvent(MotionEvent event) {
  97.   float x = event.getX();
  98.   float y = event.getY();
  100.   switch (event.getAction()) {
  101.   case MotionEvent.ACTION_DOWN:
  102.    // 每次down下去重新new一个Path
  103.    mPath = new Path();
  105.    touch_start(x, y);
  106.    invalidate();
  107.    break;
  108.   case MotionEvent.ACTION_MOVE:
  109.    touch_move(x, y);
  110.    invalidate();
  111.    break;
  112.   case MotionEvent.ACTION_UP:
  113.    touch_up();
  114.    invalidate();
  115.    break;
  116.   }
  117.   return true;
  118. }
  120. }
复制代码

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

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

  1. package cn.ych.tuya;
  3. import java.io.File;
  4. import java.io.FileNotFoundException;
  5. import java.io.FileOutputStream;
  6. import java.io.IOException;
  7. import java.util.ArrayList;
  8. import java.util.Iterator;
  9. import java.util.List;
  11. import android.content.Context;
  12. import android.graphics.Bitmap;
  13. import android.graphics.Canvas;
  14. import android.graphics.Paint;
  15. import android.graphics.Path;
  16. import android.graphics.Bitmap.CompressFormat;
  17. import android.os.Environment;
  18. import android.view.MotionEvent;
  19. import android.view.View;
  20. /**
  21. *
  22. * @category: View实现涂鸦、撤销以及重做功能
  23. * @author: 锋翼
  24. * @link: www.apkstory.com
  25. * @date: 2012.1.4
  26. *
  27. */
  28. public class TuyaView extends View {
  30. private Bitmap mBitmap;
  31. private Canvas mCanvas;
  32. private Path mPath;
  33. private Paint mBitmapPaint;// 画布的画笔
  34. private Paint mPaint;// 真实的画笔
  35. private float mX, mY;// 临时点坐标
  36. private static final float TOUCH_TOLERANCE = 4;
  38. // 保存Path路径的集合,用List集合来模拟栈
  39. private static List<DrawPath> savePath;
  40. // 记录Path路径的对象
  41. private DrawPath dp;
  43. private int screenWidth, screenHeight;// 屏幕長寬
  45. private class DrawPath {
  46.   public Path path;// 路径
  47.   public Paint paint;// 画笔
  48. }
  50. public TuyaView(Context context, int w, int h) {
  51.   super(context);
  52.   screenWidth = w;
  53.   screenHeight = h;
  55.   mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
  56.     Bitmap.Config.ARGB_8888);
  57.   // 保存一次一次绘制出来的图形
  58.   mCanvas = new Canvas(mBitmap);
  60.   mBitmapPaint = new Paint(Paint.DITHER_FLAG);
  61.   mPaint = new Paint();
  62.   mPaint.setAntiAlias(true);
  63.   mPaint.setStyle(Paint.Style.STROKE);
  64.   mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘
  65.   mPaint.setStrokeCap(Paint.Cap.SQUARE);// 形状
  66.   mPaint.setStrokeWidth(5);// 画笔宽度
  68.   savePath = new ArrayList<DrawPath>();
  69. }
  71. @Override
  72. public void onDraw(Canvas canvas) {
  73.   canvas.drawColor(0xFFAAAAAA);
  74.   // 将前面已经画过得显示出来
  75.   canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
  76.   if (mPath != null) {
  77.    // 实时的显示
  78.    canvas.drawPath(mPath, mPaint);
  79.   }
  80. }
  82. private void touch_start(float x, float y) {
  83.   mPath.moveTo(x, y);
  84.   mX = x;
  85.   mY = y;
  86. }
  88. private void touch_move(float x, float y) {
  89.   float dx = Math.abs(x - mX);
  90.   float dy = Math.abs(mY - y);
  91.   if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
  92.    // 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的)
  93.    mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
  94.    mX = x;
  95.    mY = y;
  96.   }
  97. }
  99. private void touch_up() {
  100.   mPath.lineTo(mX, mY);
  101.   mCanvas.drawPath(mPath, mPaint);
  102.   //将一条完整的路径保存下来(相当于入栈操作)
  103.   savePath.add(dp);
  104.   mPath = null;// 重新置空
  105. }
  106. /**
  107.   * 撤销的核心思想就是将画布清空，
  108.   * 将保存下来的Path路径最后一个移除掉，
  109.   * 重新将路径画在画布上面。
  110.   */
  111. public void undo() {
  112.   mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
  113.     Bitmap.Config.ARGB_8888);
  114.   mCanvas.setBitmap(mBitmap);// 重新设置画布，相当于清空画布
  115.   // 清空画布，但是如果图片有背景的话，则使用上面的重新初始化的方法，用该方法会将背景清空掉...
  116.   if (savePath != null && savePath.size() > 0) {
  117.    // 移除最后一个path,相当于出栈操作
  118.    savePath.remove(savePath.size() - 1);
  120.    Iterator<DrawPath> iter = savePath.iterator();
  121.    while (iter.hasNext()) {
  122.     DrawPath drawPath = iter.next();
  123.     mCanvas.drawPath(drawPath.path, drawPath.paint);
  124.    }
  125.    invalidate();// 刷新
  126.    
  127.    /*在这里保存图片纯粹是为了方便,保存图片进行验证*/
  128.    String fileUrl = Environment.getExternalStorageDirectory()
  129.      .toString() + "/android/data/test.png";
  130.    try {
  131.     FileOutputStream fos = new FileOutputStream(new File(fileUrl));
  132.     mBitmap.compress(CompressFormat.PNG, 100, fos);
  133.     fos.flush();
  134.     fos.close();
  135.    } catch (FileNotFoundException e) {
  136.     e.printStackTrace();
  137.    } catch (IOException e) {
  138.     e.printStackTrace();
  139.    }
  141.   }
  142. }
  143. /**
  144.   * 重做的核心思想就是将撤销的路径保存到另外一个集合里面(栈)，
  145.   * 然后从redo的集合里面取出最顶端对象，
  146.   * 画在画布上面即可。
  147.   */
  148. public void redo(){
  149.   //如果撤销你懂了的话，那就试试重做吧。
  150. }
  152. @Override
  153. public boolean onTouchEvent(MotionEvent event) {
  154.   float x = event.getX();
  155.   float y = event.getY();
  157.   switch (event.getAction()) {
  158.   case MotionEvent.ACTION_DOWN:
  159.    // 每次down下去重新new一个Path
  160.    mPath = new Path();
  161.    //每一次记录的路径对象是不一样的
  162.    dp = new DrawPath();
  163.    dp.path = mPath;
  164.    dp.paint = mPaint;
  165.    touch_start(x, y);
  166.    invalidate();
  167.    break;
  168.   case MotionEvent.ACTION_MOVE:
  169.    touch_move(x, y);
  170.    invalidate();
  171.    break;
  172.   case MotionEvent.ACTION_UP:
  173.    touch_up();
  174.    invalidate();
  175.    break;
  176.   }
  177.   return true;
  178. }
  179. }
复制代码
posted @ 2012-03-16 16:18  郑文亮  阅读(7294)  评论(2)  编辑  收藏  举报