涂鸦组件

功能

        可以在组件上面进行写字、绘画等，并且开始画的并不会消失。

来源

        apidemo->Graphics->FingerPaint

原理

        利用双缓存机制完成：用一个bitmap存储先前绘制的图形，等再次要绘制时就将该bitmap先绘制到canvas上，然后再绘制新的图形。

        为了使图形在拐点处更显圆滑，可以使用贝塞尔曲线。

示例

class SampleView extends View {
	private static final float MINP = 0.25f;
	private static final float MAXP = 0.75f;
	private Bitmap mBitmap;
	private Canvas mCanvas;
	private Path mPath;
	private Paint mBitmapPaint;
	private Paint mPaint;

	public SampleView(Context c) {
		super(c);
		mPath = new Path();
		mBitmapPaint = new Paint(Paint.DITHER_FLAG);

		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setDither(true);
		mPaint.setColor(0xFFFF0000);
		mPaint.setStyle(Paint.Style.STROKE);
		mPaint.setStrokeJoin(Paint.Join.ROUND);
		mPaint.setStrokeCap(Paint.Cap.ROUND);
		mPaint.setStrokeWidth(12);
	}

	@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);// 创建一个用于缓存的bitmap
		mCanvas = new Canvas(mBitmap);// 创建一个与缓存bitmap相关联的canvas，旧的图形都绘制在该canvas上
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawColor(0xFFAAAAAA);

		canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);// 先绘制旧的图形

		canvas.drawPath(mPath, mPaint);// 再绘制新的图形   代码一
	}

	private float mX, mY;
	private static final float TOUCH_TOLERANCE = 4;

	private void touch_start(float x, float y) {// 按下时初始化path
		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);// 使用贝塞尔曲线，使拐点更圆滑    代码二
			mX = x;
			mY = y;
		}
	}

	private void touch_up() {
		mPath.lineTo(mX, mY);
		// commit the path to our offscreen
		// 离开时将该path绘制到mCanvas中，也就是缓存bitmap(mBitmap)中，这样下次绘制时才能有上次的图形
		mCanvas.drawPath(mPath, mPaint);//代码三
		mPath.reset();// 手指拿起时，重置path
	}

	@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();// 每一次都重新绘制，为了显示最新的path路径
			break;
		case MotionEvent.ACTION_MOVE:
			touch_move(x, y);
			invalidate();
			break;
		case MotionEvent.ACTION_UP:
			touch_up();
			invalidate();
			break;
		}
		return true;
	}
}

说明

        具体代码说明见注释。
        另外，在touch_move()中，可以在代码二后调用touch_up()中的代码三将mPath直接调用到mCanvas()中，这样onDraw()中的代码一就不需要了。但是这样操作，会使代码执行的速度降低，因此直接在onDraw()中绘制path，只是在ACTION_UP时将整个触摸的过程中的path设置到mCanvas中进行保存。

        在onDraw()中，drawBitmap()和drawPath()用的Paint不是一个对象。这是为了在为mPaint.setXfermode()时仍能正常的绘制旧有的图形。