Android百議程序：繪畫程式-畫手指路徑，android百日

Android百議程序：繪畫程式-畫手指路徑，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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);dv = new DrawingView(this);dv.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View arg0, MotionEvent arg1) {// TODO Auto-generated method stubreturn 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=========================");}@Overrideprotected 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=========================");}@Overrideprotected 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 offscreenmCanvas.drawPath(mPath, mPaint);// kill this so we don't double drawmPath.reset();}@Overridepublic 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中，否則也無法把當前路徑臨時儲存。

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

這是最簡單的一個畫圖程式了，卻是很多程式，尤其是遊戲程式的基礎，還有很多其他功能以後慢慢加上去。