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