android手寫筆思路

工作需要，對這方面做了一些了解

 

一般的手寫對android canvas有點理解的應該都知道，只需要單純的使用drawPath就可以在view上畫畫。

 

而手寫筆的關鍵則是要讓path的strokeWidth發生變化

 

這個令人頭大了， 畢竟setPaint只能夠設置一個paint，一旦改變paint的參數，整個path都會發生改變。

 

所以，我們只能夠另辟蹊徑。

 

我們可以先開一個arraylist(Point)，用來記錄我們在surfaceview（推薦在畫畫功能上使用surfaceview代替view，畢竟可以減輕ui線程的壓力）上劃過的坐標

 

			Point tmpPoint = new Point();
			tmpPoint.set((int) event.getX(), (int) event.getY());
			pointStack.add(tmpPoint);

大家想想手寫筆變化的因素是什麼，是速度！

 

所以，我們必須將我們劃過屏幕的速度記錄下來，並且！這個速度是要與我們的坐標點arraylist一一對應的，這樣子我們才可以在之後畫出我們想要的字。

android 為我們提供了 VelocityTracker 用來記錄速度

我們只需要在滑動的時候調用VelocityTracker對象就可以記錄下我們的速度

 

	case MotionEvent.ACTION_DOWN:
			if (mVelocityTracker == null) {
				// Retrieve a new VelocityTracker object to watch the velocity
				// of a motion.
				mVelocityTracker = VelocityTracker.obtain();
			} else {
				// Reset the velocity tracker back to its initial state.
				mVelocityTracker.clear();
			}
			// Add a user's movement to the tracker.
			mVelocityTracker.addMovement(event);
			path.moveTo(event.getX(), event.getY());
			draw();
			break;

		case MotionEvent.ACTION_MOVE:
			mVelocityTracker.addMovement(event);
			mVelocityTracker.computeCurrentVelocity(1000);
			double speed = getSpeed(
					VelocityTrackerCompat.getYVelocity(mVelocityTracker,
							event.getActionIndex()),
					VelocityTrackerCompat.getXVelocity(mVelocityTracker,
							event.getActionIndex()));
			Point tmpPoint = new Point();
			tmpPoint.set((int) event.getX(), (int) event.getY());
			pointStack.add(tmpPoint);
			strokeStack.add((float) (speed / 200));
			draw();
			break;

大家一定好奇，draw()方法是什麼東西呢

 

draw方法就用刷新surfaceview的方法

注意，我們在這裡定義了refreshArea可以讓我們只更新手指附近的區域，可以讓我們的ui刷新快很多！

我們使用path的qualTo方法，通過手指劃過的三點（首末兩點+中間的控制點）畫出多條貝塞爾曲線，而沒有一條path的strokeWidth則是由對應的速度決定的

 

	public void draw() {
		refreshArea = new Rect(drawing_point_end.x - Scale, drawing_point_end.y
				- Scale, drawing_point_end.x + Scale, drawing_point_end.y
				+ Scale);
		Canvas canvas = getHolder().lockCanvas(refreshArea);
		canvas.drawColor(Color.WHITE);
		for (int i = 2; i < pointStack.size(); i++) {
			Path path = new Path();
			drawing_point_start = pointStack.get(i - 2);
			drawing_point_middle = pointStack.get(i - 1);
			path.moveTo(drawing_point_start.x, drawing_point_start.y);
			if (strokeStack.get(i) > 25) {
				p.setStrokeWidth(25);
			} else {
				p.setStrokeWidth(strokeStack.get(i));
			}
			drawing_point_end = pointStack.get(i);
			path.quadTo(drawing_point_middle.x, drawing_point_middle.y,
					drawing_point_end.x, drawing_point_end.y);
			canvas.drawPath(path, p);
		}

		getHolder().unlockCanvasAndPost(canvas);
	}

這樣畫出來就像手寫筆一樣啦

 

 

這個功能我只是想出了原型，後續工作交給別的同事了大家也在這基礎上好好發揮吧