android 畫板之橡皮擦功能開發

本文轉載自查看原文 2016-08-12 17:35 5570

記錄一下橡皮擦功能開發。

講一下原理：

橡皮擦功能要用到Paint類的一個屬性：

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

這句代碼的意思是：

只在源圖像和目標圖像相交的地方繪制目標圖像

不懂沒關系，首先用一個paint來繪制線條，然后用另一個paint作為橡皮擦並設置上句代碼的屬性，然后就變成了橡皮擦。

哎喲媽呀，我到底在說些什么鬼。。。。

還是看代碼吧。

看代碼就秒懂的......

package com.example.testwhatever;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;

public class CanvasActivity extends Activity {
	private int SCREEN_W;
	private int SCREEN_H;
	private int Pen = 1;
	private int Eraser = 2;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		LinearLayout layout = new LinearLayout(this);
		layout.setOrientation(LinearLayout.VERTICAL);
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT);
		Button paint = new Button(this);
		paint.setText("畫筆");
		layout.addView(paint, params);
		Button eraser = new Button(this);
		eraser.setText("橡皮");
		layout.addView(eraser, params);
		final MyView myView = new MyView(this);
		layout.addView(myView);
		setContentView(layout);

		paint.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				myView.setMode(Pen);
			}
		});
		
		eraser.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				myView.setMode(Eraser);
			}
		});
	}
　　　　　　//MyView就是自定義的畫板
	class MyView extends View {
		private int mMode = 1;
		private Bitmap mBitmap;
		private Canvas mCanvas;
		private Paint mEraserPaint;
		private Paint mPaint;
		private Path mPath;
		private float mX, mY;
		private static final float TOUCH_TOLERANCE = 4;

		public MyView(Context context) {
			super(context);
			setFocusable(true);
			setScreenWH();
			initPaint();
		}

		private void setScreenWH() {
			DisplayMetrics dm = new DisplayMetrics();
			dm = this.getResources().getDisplayMetrics();
			int screenWidth = dm.widthPixels;
			int screenHeight = dm.heightPixels;
			SCREEN_W = screenWidth;
			SCREEN_H = screenHeight;
		}
		
		//設置繪制模式是“畫筆”還是“橡皮擦”
		public void setMode(int mode){
			this.mMode = mode;
		}

		private void initPaint() {
			//畫筆
			mPaint = new Paint();
			mPaint.setAntiAlias(true);
			mPaint.setStyle(Paint.Style.STROKE);
			mPaint.setStrokeCap(Paint.Cap.ROUND);
			mPaint.setStrokeJoin(Paint.Join.ROUND);
			mPaint.setColor(Color.BLACK);
			mPaint.setStrokeWidth(10);
			//橡皮擦
			mEraserPaint = new Paint();
			mEraserPaint.setAlpha(0);
			//這個屬性是設置paint為橡皮擦重中之重
			//這是重點
			//下面這句代碼是橡皮擦設置的重點
			mEraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
			//上面這句代碼是橡皮擦設置的重點（重要的事是不是一定要說三遍）
			mEraserPaint.setAntiAlias(true);
			mEraserPaint.setDither(true);
			mEraserPaint.setStyle(Paint.Style.STROKE);
			mEraserPaint.setStrokeJoin(Paint.Join.ROUND);
			mEraserPaint.setStrokeWidth(30);

			mPath = new Path();

			mBitmap = Bitmap.createBitmap(SCREEN_W, SCREEN_H, Config.ARGB_8888);
			mCanvas = new Canvas(mBitmap);
		}

		@Override
		protected void onDraw(Canvas canvas) {
			if (mBitmap != null) {
				canvas.drawBitmap(mBitmap, 0, 0, mPaint);
			}
			super.onDraw(canvas);
		}

		private void touch_start(float x, float y) {
			mPath.reset();
			mPath.moveTo(x, y);
			mX = x;
			mY = y;
			//如果是“畫筆”模式就用mPaint畫筆進行繪制
			if (mMode == Pen) {
				mCanvas.drawPath(mPath, mPaint);
			}
			//如果是“橡皮擦”模式就用mEraserPaint畫筆進行繪制
			if (mMode == Eraser) {
				mCanvas.drawPath(mPath, mEraserPaint);
			}
			
		}

		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;
				if (mMode == Pen) {
					mCanvas.drawPath(mPath, mPaint);
				}
				if (mMode == Eraser) {
					mCanvas.drawPath(mPath, mEraserPaint);
				}
			}
		}

		
		private void touch_up() {
			mPath.lineTo(mX, mY);
			if (mMode == Pen) {
				mCanvas.drawPath(mPath, mPaint);
			}
			if (mMode == Eraser) {
				mCanvas.drawPath(mPath, mEraserPaint);
			}
		}

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

　　然后效果圖是醬紫的：