自由手記

本程序實現在一個畫布中，用手指畫圖的效果。

需要使用的知識：

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中，否則也無法把當前路徑臨時保存。

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

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

原文鏈接