android手写笔思路

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);
	}

这样画出来就像手写笔一样啦

 

 

这个功能我只是想出了原型，后续工作交给别的同事了大家也在这基础上好好发挥吧