Android百日程序：绘画程序-画手指路径

需要使用的知识：

1 Canvas 画布，动态保存更新当前画面

2 Path 记录并画出手接触屏幕经过的路径

如下面效果图：

只需要按照默认设置新建一个项目，然后在输入java代码：

package com.example.sugestures;  import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.os.Bundle; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener;  public class MainActivity extends Activity {   DrawingView dv;  private Paint mPaint;   @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   dv = new DrawingView(this);   dv.setOnTouchListener(new OnTouchListener() {    @Override    public boolean onTouch(View arg0, MotionEvent arg1) {     // TODO Auto-generated method stub     return false;    }   });   setContentView(dv);   mPaint = new Paint();   mPaint.setAntiAlias(true);   mPaint.setDither(true);   mPaint.setColor(Color.GREEN);   mPaint.setStyle(Paint.Style.STROKE);   mPaint.setStrokeJoin(Paint.Join.ROUND);   mPaint.setStrokeCap(Paint.Cap.ROUND);   mPaint.setStrokeWidth(12);      Log.d("onCreate", "onCreateActivityMain=========================");  }   public class DrawingView extends View {    public int width;   public int height;   private Bitmap mBitmap;   private Canvas mCanvas;   private Path mPath;   private Paint mBitmapPaint;   Context context;   private Paint circlePaint;   private Path circlePath;    public DrawingView(Context c) {    super(c);    context = c;    mPath = new Path();    mBitmapPaint = new Paint(Paint.DITHER_FLAG);    mBitmapPaint.setColor(Color.BLUE);    circlePaint = new Paint();    circlePath = new Path();    circlePaint.setAntiAlias(true);    circlePaint.setColor(Color.RED);    circlePaint.setStyle(Paint.Style.STROKE);    circlePaint.setStrokeJoin(Paint.Join.MITER);    circlePaint.setStrokeWidth(4f);        Log.d("DrawingView", "DrawingView=========================");    }    @Override   protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);     mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);    mCanvas = new Canvas(mBitmap);        Log.d("OnSizeChanged", "OnSizeChanged=========================");    }    @Override   protected void onDraw(Canvas canvas) {    super.onDraw(canvas);     canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);     canvas.drawPath(mPath, mPaint);     canvas.drawPath(circlePath, circlePaint);        Log.d("onDraw", "onDraw================================");   }    private float mX, mY;   private static final float TOUCH_TOLERANCE = 4;    private void touch_start(float x, float y) {    mPath.reset();    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(y - mY);    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {     mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);     //mPath.quadTo(mX, mY, x, y);     mX = x;     mY = y;      circlePath.reset();     circlePath.addCircle(mX, mY, 30, Path.Direction.CW);    }   }    private void touch_up() {    mPath.lineTo(mX, mY);    circlePath.reset();    // commit the path to our offscreen    mCanvas.drawPath(mPath, mPaint);    // kill this so we don't double draw    mPath.reset();   }    @Override   public boolean onTouchEvent(MotionEvent event) {    float x = event.getX();    float y = event.getY();     switch (event.getAction()) {    case MotionEvent.ACTION_DOWN:     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;   }  } }

主要知识点：

DrawingView类是扩展了View类的，这样可以重载其中的onTouchEvent函数，然后跟踪当前的Touch事件，这里主要是三个事件：

1 ACTION_DOWN:点击开始

2 ACTION_MOVE:点击屏幕之后，移动事件

3 ACTION_UP: 松开点击事件

分别使用touch_start， touch_move和touch_up三个函数处理这三个事件

主要是Path.quadTo这个函数画手指经过的路径，这里是使用二次方程的贝塞尔曲线画路径的。而使用lineTo就是直接画直线了。故此使用quadTo效果会更好点。而moveTo就是设置开始点了，这就是为什么touch_start使用的是moveTo。

这里为了优化，增加了一个TOUCH_TOLERANCE，只有移动超过这个值才会更新路径，其实可以不做这个判断的。

Path.reset()是清除路径作用；

新建Canvas的时候传入一个Bitmap对象，是让Canvas使用这个Bitmap保存临时数据，可以在invalid的时候重新绘制这个Bitmap画面，如果没有Bitmap，画的路径会马上消失的。

使用Lod.d()记录一下各个函数的调用情况，可以得知在程序启动的时候，onResize是在onDraw之前调用的。画图的时候onDraw调用十分频繁，需要不断更新Path路径的。

和使用MFC等框架做的画图程序，其实没什么两样，其中的逻辑思路基本一样的。

最后不要忙了使用Canvas的drawPath函数把当前绘制的路径加到Bitmap中，否则也无法把当前路径临时保存。

参考：https://stackoverflow.com/questions/16650419/draw-in-canvas-by-finger-android

这是最简单的一个画图程序了，却是很多程序，尤其是游戏程序的基础，还有很多其他功能以后慢慢加上去。