今天小编专门准备开一个Android自定义控件栏目，来分析Android常用的各种自定义控件知识，而今天的开篇，就从Android的自定义控件刮刮乐讲起把，为了让大家感兴趣，第一篇就不赘述理论，直接来玩一个有趣的刮刮乐控件。
众所周知，手机APP中有许多的抽奖方式，比如转盘抽奖，翻牌抽奖等，而今天我们只将刮刮乐抽奖，因为这个在手机APP之中用的还是挺多了，相信以后基本都能用的到。
1.创建自定义View
说到自定义控件当然就需要自定义View来实现刮刮乐，所以选择首先就需要在Android Studio中创建View，实现View常用的三个构造函数，代码如下图所示：
public class ShaveView extends View { public ShaveView(Context context) { super(context); } public ShaveView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public ShaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } }
其中第二个View构造函数，是我们最常用的，也就是将控件直接写在Layout.xml之中，就会调用此方法，所以我们的初始化工作会在这里进行，不过我们第一步还是要定义成员变量，下面就是用的的成员变量代码：
private float mPreX,mPreY;//刮刮乐手指定位的X,Y坐标 private Bitmap dstBitmap,srcBitmap;//目标图像（手指刮除图层（白色图层）），原图像也就是刮除的灰色图层 private Paint mPaint,mTextPaint;//图像画笔工具，文字画笔工具 private Path mPath;//手指刮除路径 private int strLength;//文字的长度 private int strHeight;//文字的高度 private String textStr="恭喜你中奖了";//刮除后显示的文字
2.初始化控件参数
作为自定义View来说，有一个值得关注的参数，那就是硬件加速，但是有的绘图函数并不支持硬件加速，比如今天小编讲的PorterDuffXfermode，他的部分函数并不支持硬件加速，如果你不知道哪些函数不支持硬件加速，最好关掉硬件加速设置：
setLayerType(LAYER_TYPE_SOFTWARE,null);
接着，我们初始化成员变量，避免后面调用的时候为空，造成空指针错误，代码如下：
this.mPaint=new Paint(); this.mPaint.setColor(Color.RED);//刮刮乐擦除线条颜色 this.mPaint.setStrokeWidth(45);//刮刮乐擦除线宽度 this.mPaint.setStyle(Paint.Style.STROKE);//设置为描边 this.mPath=new Path(); this.mTextPaint=new Paint(); this.mTextPaint.setColor(Color.BLACK);//设置字体颜色 this.mTextPaint.setTextSize(56);//设置字体大小 Rect rect = new Rect(); this.mTextPaint.getTextBounds(textStr,0,textStr.length(),rect);//获取文字的宽高，存储在rect中 this.strLength=rect.width();//获取文字的宽 this.strHeight=rect.height();//获取文字的高
3.onTouchEvent(MotionEvent event)实现
我们是在写一个刮刮乐控件，所以需要捕捉手势操作，而自定义View中的onTouchEvent()就是专门拦截用户手势的，这里我们利用贝济埃曲线将手势连接起来，形成手势轨迹，代码如下：
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_DOWN: mPath.moveTo(event.getX(),event.getY());//贝济埃曲线起点 this.mPreX=event.getX(); this.mPreY=event.getY(); return true; case MotionEvent.ACTION_MOVE: float endX=(this.mPreX+event.getX())/2; float endY=(this.mPreY+event.getY())/2; mPath.quadTo(this.mPreX,this.mPreY,endX,endY);//画贝济埃曲线 this.mPreX=event.getX(); this.mPreY=event.getY(); break; default: break; } postInvalidate(); return super.onTouchEvent(event); }
肯定有人会问什么是贝济埃曲线，这个后续也会将，这里你只需要知道，贝济埃曲线将手指两点之间的线条变得更平滑一些就行。这里代码的意思是，手指记录按下点，然后捕捉移动手指位置，计算得出贝济埃曲线的终点与起始点。
4.OnDraw(Canvas canvas)实现
接着就是画出原图层与目标图层呢？有过PS基础的应该都知道，PS中有一个混合模式，而今天介绍的PorterDuffXfermode也是混合模式，其中有18中混合模式，今天要使用的是PorterDuff.Mode.SRC_OUT混合模式，也就是当目标图层不透明时，计算结果将是透明的，简单的理解就是刮刮乐刮除的区域透明（灰色目标图层与手指刮除图层相交位置透明），也就显示了刮刮乐后面的文字。
理解了混合模式后，我们再来看看onDraw()前面代码：
canvas.drawColor(Color.RED);//设置自定义View背景为白色 if(this.dstBitmap==null || this.srcBitmap==null){//初始化目标图层与源图层 this.srcBitmap=Bitmap.createBitmap(getWidth()/4*3,getHeight()/4*3,Bitmap.Config.ARGB_8888);//源图层，也就是刮刮乐灰色图层 this.dstBitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);//目标图层 this.srcBitmap.eraseColor(Color.GRAY);//设置源图层背景为灰色 } canvas.drawText(textStr,getWidth()/2-strLength/2,getHeight()/2-strHeight/2,mTextPaint);//画文字
这里我们创建好了两个图层，也可以说是两个图片，比如srcBitmap源图层背景为灰色，同时直接将文字绘制到自定义View的中间位置，而文字的X,Y坐标如下图所示：
接着就是刮刮乐最核心的代码啦，所以需要认真仔细的看下，代码如下：
int layerId=canvas.saveLayer(0,0,getWidth(),getHeight(),null,Canvas.ALL_SAVE_FLAG); Canvas c=new Canvas(dstBitmap);//目标图层 c.drawPath(mPath,mPaint);//绘制手指路径 canvas.drawBitmap(dstBitmap,0,0,mPaint);//先画目标图层 mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));//设置混合模式 canvas.drawBitmap(srcBitmap,getWidth()/8,getHeight()/8,mPaint);//在画源图层 this.mPaint.setXfermode(null);//设置混合模式为空 canvas.restoreToCount(layerId);
这里我们使用离屏绘制，什么是离屏绘制，后续小编会讲，你现在只需要知道离屏绘制的代码在canvas.save与canvas.restoreToCount中间即可。
其中mPath记录的是手指刮除的位置轨迹，把它先画到dstBitmap目标图层上，然后，根据Xfermode的混合模式，先后画出目标图层与源图层，记住，这个顺序不能变，这个是刮刮乐代码中最核心的代码。
可能有的小伙伴注意到了，这里小编源图层右上角的坐标为（getWidth()/8,getHeight()/8），这是因为我们使用中，大多数刮刮乐背景边缘并不是灰色，灰色图层在中间显示，所以这里小编将源图层移动到了整个画布的相对中间点的位置，这个可以随意调节，使得看起来更加美观。
Github代码下载地址：点击下载
