自定义控件（6）---PorterDuffXfermode图形过滤器之橡皮擦应用

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<com.imooc.guaguaka.view.GuaGuaKa
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

</RelativeLayout>

MainActivity

package com.imooc.guaguaka;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

}

GuaGuaKa

package com.imooc.guaguaka.view;

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.Paint.Style;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class GuaGuaKa extends View {

/** 内存中创建的Canvas */
private Canvas mCanvas;
/** 绘制线条的Paint,即用户手指绘制Path */
private Paint mOutterPaint = new Paint();
/** 记录用户绘制的Path */
private Path mPath = new Path();
/** mCanvas绘制内容在其上 */
private Bitmap mBitmap;

private int mLastX;
private int mLastY;

/** 绘制字体 */
private Paint mBackPint = new Paint();
private Rect mTextBound = new Rect();
private String mText = "500,0000,000";

public GuaGuaKa(Context context) {
this(context, null);
}

public GuaGuaKa(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public GuaGuaKa(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = getMeasuredWidth();
int height = getMeasuredHeight();
mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
// 在canvas初始化的时候就传入了一个空的bitmap
// 最后canvas中绘画的内容都被绘制到了bitmap中，从而得到了我们需要的bitmap
mCanvas = new Canvas(mBitmap);
setUpBackPaint();
setOutPaint();

// 表面绘制一层灰色
mCanvas.drawColor(Color.parseColor("#c0c0c0"));
}

private void setOutPaint() {
// 设置画笔
mOutterPaint.setColor(Color.RED);
mOutterPaint.setAntiAlias(true);
mOutterPaint.setDither(true);
mOutterPaint.setStyle(Paint.Style.STROKE);
mOutterPaint.setStrokeJoin(Paint.Join.ROUND); // 圆角
mOutterPaint.setStrokeCap(Paint.Cap.ROUND); // 圆角
mOutterPaint.setStrokeWidth(20);
}

private void setUpBackPaint() {
mBackPint.setStyle(Style.FILL);
mBackPint.setTextScaleX(2f);
mBackPint.setColor(Color.DKGRAY);
mBackPint.setTextSize(22);
// getTextBounds(String text, int start, int end, Rect bounds)
mBackPint.getTextBounds(mText, 0, mText.length(), mTextBound);
}

@Override
protected void onDraw(Canvas canvas) {
canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2,
getHeight() / 2 + mTextBound.height() / 2, mBackPint);

mOutterPaint
.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mOutterPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);

}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
int x = (int) event.getX();
int y = (int) event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
mPath.moveTo(mLastX, mLastY);
break;
case MotionEvent.ACTION_MOVE:

mPath.lineTo(x, y);

mLastX = x;
mLastY = y;
break;
}

invalidate();
return true;
}

}

*************************************************二*******************************************



activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical" >

<com.aigestudio.customviewdemo.views.EraserView
android:id="@+id/main_cv"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

MainActivity

package com.aigestudio.customviewdemo.activities;

import android.app.Activity;
import android.os.Bundle;

import com.aigestudio.customviewdemo.R;

/**
* 主界面
*/
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

MeasureUtil

package com.aigestudio.customviewdemo.utils;

import android.app.Activity;
import android.util.DisplayMetrics;

/**
* 测绘工具类
*/
public final class MeasureUtil {
/**
* 获取屏幕尺寸
*
* @param activity
*            Activity
* @return 屏幕尺寸像素值，下标为0的值为宽，下标为1的值为高
*/
public static int[] getScreenSize(Activity activity) {
DisplayMetrics metrics = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
return new int[] { metrics.widthPixels, metrics.heightPixels };
}
}

EraserView

package com.aigestudio.customviewdemo.views;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import com.aigestudio.customviewdemo.R;
import com.aigestudio.customviewdemo.utils.MeasureUtil;

/**
* 橡皮檫View
*/
public class EraserView extends View {
private static final int MIN_MOVE_DIS = 5;// 最小的移动距离：如果我们手指在屏幕上的移动距离小于此值则不会绘制

private Bitmap fgBitmap, bgBitmap;// 前景橡皮擦的Bitmap和背景我们底图的Bitmap
private Canvas mCanvas;// 绘制橡皮擦路径的画布
private Paint mPaint;// 橡皮檫路径画笔
private Path mPath;// 橡皮擦绘制路径

private int screenW, screenH;// 屏幕宽高
private float preX, preY;// 记录上一个触摸事件的位置坐标

public EraserView(Context context, AttributeSet set) {
super(context, set);

// 计算参数
cal(context);

// 初始化对象
init(context);
}

/**
* 计算参数
*
* @param context
*            上下文环境引用
*/
private void cal(Context context) {
// 获取屏幕尺寸数组
int[] screenSize = MeasureUtil.getScreenSize((Activity) context);

// 获取屏幕宽高
screenW = screenSize[0];
screenH = screenSize[1];
}

/**
* 初始化对象
*/
private void init(Context context) {
// 实例化路径对象
mPath = new Path();

// 实例化画笔并开启其抗锯齿和抗抖动
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

// 设置画笔透明度为0是关键！我们要让绘制的路径是透明的，然后让该路径与前景的底色混合“抠”出绘制路径
mPaint.setARGB(128, 255, 0, 0);

// 设置混合模式为DST_IN
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

// 设置画笔风格为描边
mPaint.setStyle(Paint.Style.STROKE);

// 设置路径结合处样式
mPaint.setStrokeJoin(Paint.Join.ROUND);

// 设置笔触类型
mPaint.setStrokeCap(Paint.Cap.ROUND);

// 设置描边宽度
mPaint.setStrokeWidth(50);

// 生成前景图Bitmap
fgBitmap = Bitmap.createBitmap(screenW, screenH, Config.ARGB_8888);

// 将其注入画布
mCanvas = new Canvas(fgBitmap);

// 绘制画布背景为中性灰
mCanvas.drawColor(0xFF808080);

// 获取背景底图Bitmap
bgBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.a4);

// 缩放背景底图Bitmap至屏幕大小
bgBitmap = Bitmap.createScaledBitmap(bgBitmap, screenW, screenH, true);
}

@Override
protected void onDraw(Canvas canvas) {
// 绘制背景
canvas.drawBitmap(bgBitmap, 0, 0, null);

// 绘制前景
canvas.drawBitmap(fgBitmap, 0, 0, null);

/*
* 这里要注意canvas和mCanvas是两个不同的画布对象
* 当我们在屏幕上移动手指绘制路径时会把路径通过mCanvas绘制到fgBitmap上
* 每当我们手指移动一次均会将路径mPath作为目标图像绘制到mCanvas上，而在上面我们先在mCanvas上绘制了中性灰色
* 两者会因为DST_IN模式的计算只显示中性灰，但是因为mPath的透明，计算生成的混合图像也会是透明的
* 所以我们会得到“橡皮擦”的效果
*/
mCanvas.drawPath(mPath, mPaint);
}

/**
* View的事件将会在7/12详解
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
/*
* 获取当前事件位置坐标
*/
float x = event.getX();
float y = event.getY();

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:// 手指接触屏幕重置路径
mPath.reset();
mPath.moveTo(x, y);
preX = x;
preY = y;
break;
case MotionEvent.ACTION_MOVE:// 手指移动时连接路径
float dx = Math.abs(x - preX);
float dy = Math.abs(y - preY);
if (dx >= MIN_MOVE_DIS || dy >= MIN_MOVE_DIS) {
mPath.quadTo(preX, preY, (x + preX) / 2, (y + preY) / 2);
preX = x;
preY = y;
}
break;
}

// 重绘视图
invalidate();
return true;
}
}