Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

很久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类例子也比较多了，大家可以百度看看~不过还是通过本例子，带大家发掘一下，里面隐含的知识~

1、Xfermode以及PorterDuff

如果大家还记得，曾经在博客：完美实现图片圆角和圆形 简单介绍过圆角的实现原理也是基于这个。

首先我们看一下官方的例子，很好的展示了16种Mode的效果：

注：先绘制的Dst，再绘制的Src。

好了，看了这个图，我来问大家几个问题：

问题1、如果我想实现圆形图片，怎么实现？

答：先绘制我们的图片，然后在上面绘制一个圆，最后生成的效果就是圆形图片；等等，怎么就生成了，请看上面的SrcIn这种模式；

先绘制的Dst，然后设置DstIn，然后绘制Src；最后效果是留下了二者交集且是Dst的部分；下面我们把我们的答案带进去。

先绘制图片，然后设置DstIn，然后绘制圆形；最后效果是留下了二者交集且是图片的部分；嗯，交集是什么，圆形；圆形内容是什么，图片；搜噶，有点感觉了。

----

等等，我还有有个思路，先绘制圆形，然后设置SrcIn，再绘制我们的图片；也能生成我们的圆形图片。我们来看看：

SrcIn最终保留的依然是交集，但是显示为后绘制的，也就是我们的图片，搜噶，这样也可以。

问题2、如果我想实现圆角图片，怎么实现？

答：擦，看了上面的答案，你还没思路么。把绘制圆形，改成绘制圆角矩形。请问你还有什么问的，额，，，木有了。

嗯，把问题1的圆形改成圆角，按照相同的绘制过程就实现了我们的圆角图片了。

问题3、这和我们的刮刮卡有毛线关系？

答：怎么没有关系，，，你先绘制刮奖层，然后设置DST_OUT，然后把用户手触摸的线条绘制上去；用户触摸到刮奖层的部分（交集部分）会被消除，也是就说刮奖层被我们擦掉了~

这不就是刮奖么。等等，奖呢？

奖无非就是文本，或者图片，提前绘制一下，然后在其上绘制刮奖层，设置DST_OUT，然后把用户触摸绘制上去；这样消失以后就能看到背后的奖了~~~对了，现在还有个app叫脱什么妹子衣服，先绘制妹子，然后绘制衣服，然后擦~~这个和刮奖像不像，额，我什么都没说。

搜噶，经过上面的3个问题，大家应该明白了，什么圆角，圆形，刮刮卡，其实原理就这么简单，，，

2、简易画板的实现

我们的刮刮卡需要掌握绘图，当然了这里不要求你有美术天分，会瞎涂鸦就可以了~~

下面开始我们的一个简易的画板，其实就是可以在上面画点线条，当然你也可以签个名，我们的View的叫做GuaGuaKa：

1、初步GuaGuaKa

[java] view plaincopy

1. package com.zhy.view;  
2.   
3. import android.content.Context;  
4. import android.graphics.Bitmap;  
5. import android.graphics.Bitmap.Config;  
6. import android.graphics.Canvas;  
7. import android.graphics.Color;  
8. import android.graphics.Paint;  
9. import android.graphics.Path;  
10. import android.util.AttributeSet;  
11. import android.view.MotionEvent;  
12. import android.view.View;  
13.   
14. public class GuaGuaKa extends View  
15. {  
16.   
17.     /** 
18.      * 绘制线条的Paint,即用户手指绘制Path 
19.      */  
20.     private Paint mOutterPaint = new Paint();  
21.     /** 
22.      * 记录用户绘制的Path 
23.      */  
24.     private Path mPath = new Path();  
25.     /** 
26.      * 内存中创建的Canvas 
27.      */  
28.     private Canvas mCanvas;  
29.     /** 
30.      * mCanvas绘制内容在其上 
31.      */  
32.     private Bitmap mBitmap;  
33.   
34.     private int mLastX;  
35.     private int mLastY;  
36.   
37.     public GuaGuaKa(Context context)  
38.     {  
39.         this(context, null);  
40.     }  
41.   
42.     public GuaGuaKa(Context context, AttributeSet attrs)  
43.     {  
44.         this(context, attrs, 0);  
45.     }  
46.   
47.     public GuaGuaKa(Context context, AttributeSet attrs, int defStyle)  
48.     {  
49.         super(context, attrs, defStyle);  
50.         init();  
51.     }  
52.   
53.     private void init()  
54.     {  
55.         mPath = new Path();  
56.   
57.     }  
58.   
59.     @Override  
60.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
61.     {  
62.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
63.   
64.         int width = getMeasuredWidth();  
65.         int height = getMeasuredHeight();  
66.         // 初始化bitmap  
67.         mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);  
68.         mCanvas = new Canvas(mBitmap);  
69.         // 设置画笔  
70.         mOutterPaint.setColor(Color.RED);  
71.         mOutterPaint.setAntiAlias(true);  
72.         mOutterPaint.setDither(true);  
73.         mOutterPaint.setStyle(Paint.Style.STROKE);  
74.         mOutterPaint.setStrokeJoin(Paint.Join.ROUND); // 圆角  
75.         mOutterPaint.setStrokeCap(Paint.Cap.ROUND); // 圆角  
76.         // 设置画笔宽度  
77.         mOutterPaint.setStrokeWidth(20);  
78.     }  
79.   
80.     @Override  
81.     protected void onDraw(Canvas canvas)  
82.     {  
83.         drawPath();  
84.         canvas.drawBitmap(mBitmap, 0, 0, null);  
85.   
86.     }  
87.   
88.     /** 
89.      * 绘制线条 
90.      */  
91.     private void drawPath()  
92.     {  
93.         mCanvas.drawPath(mPath, mOutterPaint);  
94.   
95.     }  
96.   
97.     @Override  
98.     public boolean onTouchEvent(MotionEvent event)  
99.     {  
100.         int action = event.getAction();  
101.         int x = (int) event.getX();  
102.         int y = (int) event.getY();  
103.         switch (action)  
104.         {  
105.         case MotionEvent.ACTION_DOWN:  
106.             mLastX = x;  
107.             mLastY = y;  
108.             mPath.moveTo(mLastX, mLastY);  
109.             break;  
110.         case MotionEvent.ACTION_MOVE:  
111.   
112.             int dx = Math.abs(x - mLastX);  
113.             int dy = Math.abs(y - mLastY);  
114.   
115.             if (dx > 3 || dy > 3)  
116.                 mPath.lineTo(x, y);  
117.   
118.             mLastX = x;  
119.             mLastY = y;  
120.             break;  
121.         }  
122.   
123.         invalidate();  
124.         return true;  
125.     }  
126.   
127. }  

代码量比较少，我们在内存中搞了一个mCanvas，创建了一个mBitmap，然后通过mCanvas使用我们预先设置的mOuterPaint在我们的mBitmap上绘制mPath；

mPath里面的数据怎么搞呢？就是onTouchEvent里面不断的moveTo，lineTo就好了~~代码还是很随意的

最后，注意我们绘制内存上的mBitmap上面，然后我们通过view的canvas，把我们的mBitmap展现。咦，怎么有点双缓冲的感脚。

好了，现在你就可以在我们的画板上肆掠了：

下面看布局文件以及运行效果：

2、布局文件及运行效果

布局文件：

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.zhy.view.GuaGuaKa  
7.         android:layout_width="match_parent"  
8.         android:layout_height="match_parent" />  
9.   
10. </RelativeLayout>  

运行效果：

看到我浑厚的字体没有，等以后写不动程序了，我就去当书法家~

好了，我们的简易画板完成以后，我们开始考虑正题，一步一步逼近我们的刮刮板，现在我们准备这样做，首先在背后绘制一张图片，然后绘制一个遮盖层，然后我们绘画的过程就是擦除遮盖层。

3、擦除的第一次实现

鉴于很多朋友的意见，我决定这次的图片用风景图，远离xxx ， 感谢seven提供的图片~

1、绘制遮盖层

其实遮盖层就是一个颜色：

[java] view plaincopy

1. @Override  
2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
3.     {  
4.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
5.   
6.         int width = getMeasuredWidth();  
7.         int height = getMeasuredHeight();  
8.         // 初始化bitmap  
9.         mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);  
10.         mCanvas = new Canvas(mBitmap);  
11.         setUpOutPaint();  
12.         //绘制这改成  
13.         mCanvas.drawColor(Color.parseColor("#c0c0c0"));  
14.     }  

和上面贴的代码就多了最后一行，另外我们的paint的设置抽取出去了~

2、drawPath

文章起初的原理终于要用上了，我们在绘制Path的时候，需要设置一个模式，这里是DST_OUT ，想想有点小激动~

[java] view plaincopy

1. private void drawPath()  
2.     {  
3.           
4.         mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));  
5.         mCanvas.drawPath(mPath, mOutterPaint);  
6.     }  

3、onDraw

onDraw里面也要做一点修改

[java] view plaincopy

1. @Override  
2. protected void onDraw(Canvas canvas)  
3. {  
4.     canvas.drawBitmap(mBackBitmap, 0, 0, null);  
5.     drawPath();  
6.     canvas.drawBitmap(mBitmap, 0, 0, null);  
7. }  

好了，到此完成，其实就添加了几行代码，就完成了我们简易画板到刮刮卡的转变；

下面看效果：

有没有拨开云雾见天明的感觉~~

到此我们的刮刮卡的原理，以及初步的实现结束了~~还是很简单的~接下来就是后续的完善工作

4、刮刮卡的完善

我们准备把奖项改为字体，将字体绘制在屏幕的中间；

那么直接把上例绘制图片改为绘制字体就行了，不过多了一个绘制字体画笔的设置：

有变化的代码：

[java] view plaincopy

1. private Paint mBackPint = new Paint();  
2.     private Rect mTextBound = new Rect();  
3.     private String mText = "500,0000,000";  
4.     /** 
5.      * 初始化canvas的绘制用的画笔 
6.      */  
7.     private void setUpBackPaint()  
8.     {  
9.         mBackPint.setStyle(Style.FILL);  
10.         mBackPint.setTextScaleX(2f);  
11.         mBackPint.setColor(Color.DKGRAY);  
12.         mBackPint.setTextSize(22);  
13.         mBackPint.getTextBounds(mText, 0, mText.length(), mTextBound);  
14.     }  
15.       
16.     @Override  
17.     protected void onDraw(Canvas canvas)  
18.     {  
19.         // canvas.drawBitmap(mBackBitmap, 0, 0, null);  
20.         //绘制奖项  
21.         canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2,  
22.                 getHeight() / 2 + mTextBound.height() / 2, mBackPint);  
23.           
24.         drawPath();  
25.         canvas.drawBitmap(mBitmap, 0, 0, null);  
26.     }  

下面看看我中了多钱：

好了，到此已经完全实现了，大家按照例子，结合自己需求修改即可，里面所涉及的原理相信已经解释清楚了；对了，差点忘了，刮刮卡一般都有一个功能，当你挂了差不多的时候，涂层会自动清除，下面我们尝试添加该功能。

5、统计刮开区域已占的百分比

我们在ACTION_UP的时候就行计算，首先我们还是给大家灌输下计算的原理，如果大家用心看了，应该知道我们所有的操作基本都在mBitmap，现在我们获得mBItmap上所有的像素点的数据，统计被清除的区域（被清除的像素为0）；最后与我们图片的总像素数做个除法元算，就可以拿到我们清除的百分比了；

不过，计算可能会是一个耗时的操作，具体速度跟图片大小有关，所以我们决定使用异步的方式去计算：

[java] view plaincopy

1. /** 
2.  * 统计擦除区域任务 
3.  */  
4. private Runnable mRunnable = new Runnable()  
5. {  
6.     private int[] mPixels;  
7.   
8.     @Override  
9.     public void run()  
10.     {  
11.   
12.         int w = getWidth();  
13.         int h = getHeight();  
14.   
15.         float wipeArea = 0;  
16.         float totalArea = w * h;  
17.   
18.         Bitmap bitmap = mBitmap;  
19.   
20.         mPixels = new int[w * h];  
21.   
22.         /** 
23.          * 拿到所有的像素信息 
24.          */  
25.         bitmap.getPixels(mPixels, 0, w, 0, 0, w, h);  
26.   
27.         /** 
28.          * 遍历统计擦除的区域 
29.          */  
30.         for (int i = 0; i < w; i++)  
31.         {  
32.             for (int j = 0; j < h; j++)  
33.             {  
34.                 int index = i + j * w;  
35.                 if (mPixels[index] == 0)  
36.                 {  
37.                     wipeArea++;  
38.                 }  
39.             }  
40.         }  
41.           
42.         /** 
43.          * 根据所占百分比，进行一些操作 
44.          */  
45.         if (wipeArea > 0 && totalArea > 0)  
46.         {  
47.             int percent = (int) (wipeArea * 100 / totalArea);  
48.             Log.e("TAG", percent + "");  
49.   
50.             if (percent > 70)  
51.             {  
52.                 isComplete = true;  
53.                 postInvalidate();  
54.             }  
55.         }  
56.     }  
57.   
58. };  

有了这个任务，我们在ACTION_UP的时候就行调用：

[java] view plaincopy

1. case MotionEvent.ACTION_UP:  
2.             new Thread(mRunnable).start();  
3.             break;  

注意任务结束，会把一个isComplete设置为true；当为true时，我们直接展现刮奖区

[java] view plaincopy

1. @Override  
2.     protected void onDraw(Canvas canvas)  
3.     {  
4.         drawBackText(canvas);  
5.   
6.         if (!isComplete)  
7.         {  
8.             drawPath();  
9.             canvas.drawBitmap(mBitmap, 0, 0, null);  
10.         }  
11.   
12.     }  

到此刮奖区的计算就结束了。

下面在演示前，我做了一些简单的美化，具体大家到时候看源码就可以。

到此我们的刮刮卡制作就结束了，另外如果大家希望再完善，可以把里面很多常量设置成变量，添加对外的set方法，或者抽取成自定义属性，在布局文件进行定义都可以~~~

有一点需要说明一下，对于我们刮刮卡这个案例，我们布局文件如果宽高设置为wrap_content，也会占满屏幕，主要是因为我觉得刮刮卡这个view没必要wrap_content；但是如果你希望支持wrp_content，可以参考Android 自定义View (一) 。

源码点击下载

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/40162163 ， 本文出自：【张鸿洋的博客】