Android scratch card implementation principle and code explanation

public class GuaGuaLe extends View{
 /**中奖文本变量*/
 private String mText;//显示文本
 private Paint mTextPaint;//绘制文本的画笔
 private Rect mTextBounds;//文本的边界
 
 public GuaGuaLe(Context context) {
 this(context, null);
 }
 
 public GuaGuaLe(Context context, AttributeSet attrs) {
 super(context, attrs);
 initView();
 }
 
 /**初始化一些实例变量*/
 private void initView() {
 setTextMessage();//实例化文本的一些变量
 
 }
 
 private void setTextMessage() {
 mText = "谢谢惠顾";
 mTextBounds = new Rect();
 mTextPaint = new Paint();
 mTextPaint.setAntiAlias(true);
 mTextPaint.setColor(Color.DKGRAY);
 mTextPaint.setTextSize(22);
 mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//获取到绘制文本的长宽
 }
 
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 //绘制文本
 canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
 }
}

/**画板变量*/
private Canvas mCanvas;//缓冲画板
private Bitmap mLayerBimtap;//图层图片
private Bitmap mBitmap;//画板上的画纸
private Paint mPaint;//画笔
 
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setCanvasMessage(getMeasuredWidth(),getMeasuredHeight());//实例化缓存画板的一些变量
}
 
/***
* 双缓冲技术
* 1.创建一个与屏幕绘制区域一致的Canvas对象
* 2.先将图形绘制到内存中
* 3.再一次性将对象上的图形拷贝到屏幕上
* @param width
* @param height
*/
private void setCanvasMessage(int width,int height) {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(3);
mPaint.setColor(Color.parseColor("#c0c0c0"));
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//创建一个空白的位图
mCanvas = new Canvas(mBitmap);//在此Bitmap上作画
//mCanvas.drawColor(Color.parseColor("#c0c0c0"));//绘制背景颜色
mCanvas.drawRoundRect(new RectF(0, 0, width, height), 20, 20, mPaint);//绘制圆角矩形
mLayerBimtap = BitmapFactory.decodeResource(getResources(), R.mipmap.fg_guaguaka);
mCanvas.drawBitmap(mLayerBimtap, null, new RectF(0, 0, width, height), null);//绘制图层图片
 
@Override
protected void onDraw(Canvas canvas) {
//绘制文本
canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
//绘制图层
//canvas.drawBitmap(mBitmap,0,0,null);
//绘制图层图片
canvas.drawBitmap(mBitmap,0,0,null);
}
}

/**路径变量*/
private Path mPath;
private Paint mPathPaint;
private int mLastX;//记录上一次X坐标
private int mLastY;//记录上一次Y坐标
 
/**初始化一些实例变量*/
private void initView() {
setTextMessage();//实例化文本的一些变量
setPathMessage();//实例化路径的一些变量
}
 
@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:
 int dx = Math.abs(x - mLastX);
 int dy = Math.abs(y - mLastY);
 if(dx > 3 || dy >3){
  mPath.lineTo(x, y);
 }
 mLastX = x;
 mLastY = y;
 break;
 case MotionEvent.ACTION_UP:
 break;
 default:
 break;
}
invalidate();//主线程中刷新
return true;//截取事件向下分发
}
 
@Override
protected void onDraw(Canvas canvas) {
//绘制文本
canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
//绘制路径
drawPath();
//绘制图片【图层背景颜色】
//canvas.drawBitmap(mBitmap,0,0,null);
//绘制图片【图层图片】
canvas.drawBitmap(mBitmap, 0, 0, null);
 
}
 
//返回给系统的canvas是一幅带有路径的位图
private void drawPath() {
//这之前是设置了图层图片
mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath,mPathPaint);
}

/**擦除是否完成*/
 private volatile boolean isComplete;
 
 /**回调接口*/
 private OnCompleteListener mOnCompleteListener;
 
 
 public interface OnCompleteListener{
 void complete();
 }
 
 //对外设置调用的公开方法
 public void setmOnCompleteListener(OnCompleteListener mOnCompleteListener){
 this.mOnCompleteListener = mOnCompleteListener;
 }
 
 case MotionEvent.ACTION_UP:
  //开启一个线程去计算擦除的面积
  new Thread(new Runnable() {
   @Override
   public void run() {
   int width = getWidth();
   int height = getHeight();
   int area = 0;//记录被擦数的范围大小
   int percent ;
   for(int i=0;i<width;i++)
    for(int j = 0;j<height;j++){
    if(mBitmap.getPixel(i,j) == 0){
     area ++;
    }
    }
 
   if(area > 0){
    percent = area *100/(width*height);
    if(percent > 20){
    isComplete = true;
    postInvalidate();//在子线程中刷新，可能比较耗时操作
    }
   }
   }
  }).start();
 
 @Override
 protected void onDraw(Canvas canvas) {
 //绘制文本
 canvas.drawText(mText, getWidth() / 2 - mTextBounds.width() / 2, getHeight() / 2 + mTextBounds.height() / 2, mTextPaint);
 
 if(isComplete){
  if(mOnCompleteListener != null){
  mOnCompleteListener.complete();//接口回调，在主线程中
  }
 }
 
 if(!isComplete){
  //绘制路径
  drawPath();
  //绘制图片【图层背景颜色】
  //canvas.drawBitmap(mBitmap,0,0,null);
  //绘制图片【图层图片】
  canvas.drawBitmap(mBitmap, 0, 0, null);
 }
 }
 
 
public class MainActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);
 //注册了一个观察者
 guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {
  @Override
  public void complete() {
  Toast.makeText(MainActivity.this, "用户绘制了大部分", Toast.LENGTH_SHORT).show();
  }
 });
 }
}

在values/attrs.xml中定义
 <declare-styleable name="GuaGuaLe">
 <attr name="text" format="string"></attr>
 <attr name="textSize" format="dimension"></attr>
 <attr name="textColor" format="color"></attr>
 </declare-styleable>
 
在布局文件中定义属性
 <zlll.bg.com.example.cn.myapplication.view.GuaGuaLe
  android:id="@+id/guaguale"
  android:layout_width="350dp"
  android:layout_height="200dp"
  app:text="$5,000"
  app:textColor="#c02040"
  app:textSize="22sp"
  android:layout_centerInParent="true"/>
 
在主界面中定义Text文本
public class MainActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);
 //注册了一个观察者
 guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {
  @Override
  public void complete() {
  Toast.makeText(MainActivity.this, "用户绘制了大部分", Toast.LENGTH_SHORT).show();
  }
 });
 guaguaLeView.setTextByUser("Android 新技能Get");
 
 }
}
 
 /**中奖文本变量*/
 private String mText;//显示文本
 private Paint mTextPaint;//绘制文本的画笔
 private Rect mTextBounds;//文本的边界
 //以下两个是新增的
 private int mTextSize;//文本大小
 private int mTextColor;//文本颜色
 
 //对外设置调用的设置文本公开方法
 public void setTextByUser(String text){
 mText = text;
 mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//重新计算文本的范围
 }
 
在构造函数中定义
 public GuaGuaLe(Context context, AttributeSet attrs) {
 super(context, attrs);
 //获取自定义属性的值
 TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.GuaGuaLe);
 mText = a.getString(R.styleable.GuaGuaLe_text);
 mTextColor = a.getColor(R.styleable.GuaGuaLe_textColor, Color.parseColor("#c0c0c0"));
 //TypedValue.applyDimension内部就是将sp,dp转化为px
 mTextSize = a.getDimensionPixelSize(R.styleable.GuaGuaLe_textSize, (int) TypedValue.applyDimension
  (TypedValue.COMPLEX_UNIT_SP,22,getResources().getDisplayMetrics()));
 a.recycle();
 initView();
 }