android 画板之橡皮擦功能开发

记录一下橡皮擦功能开发。

讲一下原理:

橡皮擦功能要用到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;
		}
	}
}

  然后效果图是酱紫的:

 

其实就是,就是 ,就是那个画笔的paint和橡皮擦的paint两个图像相交,然后就会绘制相交的区域,相交的区域并不是绘制成白色,而是透明的。这都是因为橡皮擦的paint设置了那个很重要的属性:PorterDuff.Mode.DST_IN

为了证明相交区域真的绘制的是透明的,而不是白色,给MyView设置一张背景图,如果绘制的是白色,那么背景图也会被绘制成白色。如果是透明,那么背景图不会受影响。

在上述代码中的MyView的构造函数中加一句代码:setBackgroundResource(R.drawable.picture);

然后运行结果图是酱紫的:

 

 所以这就是开发橡皮擦功能时为什么推荐用设置paint这个PorterDuff.Mode.DST_IN属性,而不是单纯的绘制白色了。

另外关于PorterDuff.Mode还有很多模式:

android.graphics.PorterDuff.Mode.SRC:只绘制源图像

android.graphics.PorterDuff.Mode.DST:只绘制目标图像

android.graphics.PorterDuff.Mode.DST_OVER:在源图像的顶部绘制目标图像

android.graphics.PorterDuff.Mode.DST_IN:只在源图像和目标图像相交的地方绘制目标图像

android.graphics.PorterDuff.Mode.DST_OUT:只在源图像和目标图像不相交的地方绘制目标图像

android.graphics.PorterDuff.Mode.DST_ATOP:在源图像和目标图像相交的地方绘制目标图像,在不相交的地方绘制源图像

android.graphics.PorterDuff.Mode.SRC_OVER:在目标图像的顶部绘制源图像

android.graphics.PorterDuff.Mode.SRC_IN:只在源图像和目标图像相交的地方绘制源图像

android.graphics.PorterDuff.Mode.SRC_OUT:只在源图像和目标图像不相交的地方绘制源图像

android.graphics.PorterDuff.Mode.SRC_ATOP:在源图像和目标图像相交的地方绘制源图像,在不相交的地方绘制目标图像

android.graphics.PorterDuff.Mode.XOR:在源图像和目标图像重叠之外的任何地方绘制他们,而在不重叠的地方不绘制任何内容

android.graphics.PorterDuff.Mode.LIGHTEN:获得每个位置上两幅图像中最亮的像素并显示

android.graphics.PorterDuff.Mode.DARKEN:获得每个位置上两幅图像中最暗的像素并显示

android.graphics.PorterDuff.Mode.MULTIPLY:将每个位置的两个像素相乘,除以255,然后使用该值创建一个新的像素进行显示。结果颜色=顶部颜色*底部颜色/255

android.graphics.PorterDuff.Mode.SCREEN:反转每个颜色,执行相同的操作(将他们相乘并除以255),然后再次反转。结果颜色=255-(((255-顶部颜色)*(255-底部颜色))/255)

可以每个模式都设置玩玩嘛,看看每个属性是什么效果~~~反正我是不会去玩这么无聊的东西的。我懒啊~~~O(∩_∩)O~~

转载于:https://www.cnblogs.com/SusieBlog/p/5765832.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值