记录一下橡皮擦功能开发。
讲一下原理:
橡皮擦功能要用到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~~