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

大道之行，天下为公。这篇文章主要讲述Android 自己定义控件实现刮刮卡效果真的就仅仅是刮刮卡么相关的知识，希望能为你提供帮助。
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/40162163 ，本文出自：【张鸿洋的博客】
非常久以前也过一个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

package com.zhy.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.Path; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class GuaGuaKa extends View { /** * 绘制线条的Paint,即用户手指绘制Path */ private Paint mOutterPaint = new Paint(); /** * 记录用户绘制的Path */ private Path mPath = new Path(); /** * 内存中创建的Canvas */ private Canvas mCanvas; /** * mCanvas绘制内容在其上 */ private Bitmap mBitmap; private int mLastX; private int mLastY; 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); init(); } private void init() { mPath = new Path(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth(); int height = getMeasuredHeight(); // 初始化bitmap mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888); mCanvas = new Canvas(mBitmap); // 设置画笔 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); } @Override protected void onDraw(Canvas canvas) { drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); } /** * 绘制线条 */ private void drawPath() { mCanvas.drawPath(mPath, mOutterPaint); } @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; }invalidate(); return true; }}

代码量比較少。我们在内存中搞了一个mCanvas，创建了一个mBitmap。然后通过mCanvas使用我们预先设置的mOuterPaint在我们的mBitmap上绘制mPath；
mPath里面的数据怎么搞呢？就是onTouchEvent里面不断的moveTo。lineTo就好了~~代码还是非常任意的
最后，注意我们绘制内存上的mBitmap上面，然后我们通过view的canvas。把我们的mBitmap展现。咦。怎么有点双缓冲的感脚。
好了，如今你就能够在我们的画板上肆掠了：
以下看布局文件以及执行效果：
2、布局文件及执行效果布局文件：

< 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.zhy.view.GuaGuaKa android:layout_width=" match_parent" android:layout_height=" match_parent" /> < /RelativeLayout>

执行效果：

文章图片

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

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

3、擦除的第一次实现鉴于非常多朋友的意见。我决定这次的图片用风景图，远离xxx ，感谢seven提供的图片~

1、绘制遮盖层
事实上遮盖层就是一个颜色：

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth(); int height = getMeasuredHeight(); // 初始化bitmap mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888); mCanvas = new Canvas(mBitmap); setUpOutPaint(); //绘制这改成 mCanvas.drawColor(Color.parseColor(" #c0c0c0" )); }

和上面贴的代码就多了最后一行，另外我们的paint的设置抽取出去了~
2、drawPath文章起初的原理最终要用上了。我们在绘制Path的时候，须要设置一个模式，这里是DST_OUT ，想想有点小激动~

private void drawPath() {mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); mCanvas.drawPath(mPath, mOutterPaint); }

3、onDraw
onDraw里面也要做一点改动

@Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(mBackBitmap, 0, 0, null); drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); }

好了。到此完毕。事实上就加入了几行代码，就完毕了我们简易画板到刮刮卡的转变；
以下看效果：

文章图片

有没有拨开云雾见天明的感觉~~
到此我们的刮刮卡的原理，以及初步的实现结束了~~还是非常easy的~接下来就是兴许的完好工作

4、刮刮卡的完好我们准备把奖项改为字体。将字体绘制在屏幕的中间；
那么直接把上例绘制图片改为绘制字体即可了，只是多了一个绘制字体画笔的设置：
有变化的代码：

private Paint mBackPint = new Paint(); private Rect mTextBound = new Rect(); private String mText = " 500,0000,000" ; /** * 初始化canvas的绘制用的画笔 */ private void setUpBackPaint() { mBackPint.setStyle(Style.FILL); mBackPint.setTextScaleX(2f); mBackPint.setColor(Color.DKGRAY); mBackPint.setTextSize(22); mBackPint.getTextBounds(mText, 0, mText.length(), mTextBound); } @Override protected void onDraw(Canvas canvas) { // canvas.drawBitmap(mBackBitmap, 0, 0, null); //绘制奖项 canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2, getHeight() / 2 + mTextBound.height() / 2, mBackPint); drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); }

以下看看我中了多钱：

文章图片

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

5、统计刮开区域已占的百分比我们在ACTION_UP的时候即可计算。首先我们还是给大家灌输下计算的原理。假设大家用心看了，应该知道我们全部的操作基本都在mBitmap，如今我们获得mBItmap上全部的像素点的数据。统计被清除的区域（被清除的像素为0）；最后与我们图片的总像素数做个除法元算，就能够拿到我们清除的百分比了。
只是，计算可能会是一个耗时的操作，详细速度跟图片大小有关，所以我们决定使用异步的方式去计算：

/** * 统计擦除区域任务 */ private Runnable mRunnable = new Runnable() { private int[] mPixels; @Override public void run() {int w = getWidth(); int h = getHeight(); float wipeArea = 0; float totalArea = w * h; Bitmap bitmap = mBitmap; mPixels = new int[w * h]; /** * 拿到全部的像素信息 */ bitmap.getPixels(mPixels, 0, w, 0, 0, w, h); /** * 遍历统计擦除的区域 */ for (int i = 0; i < w; i++) { for (int j = 0; j < h; j++) { int index = i + j * w; if (mPixels[index] == 0) { wipeArea++; } } }/** * 依据所占百分比。进行一些操作 */ if (wipeArea > 0 & & totalArea > 0) { int percent = (int) (wipeArea * 100 / totalArea); Log.e(" TAG" , percent + " " ); if (percent > 70) { isComplete = true; postInvalidate(); } } } };

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

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

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

@Override protected void onDraw(Canvas canvas) { drawBackText(canvas); if (!isComplete) { drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); } }

到此刮奖区的计算就结束了。
以下在演示前。我做了一些简单的美化，详细大家到时候看源代码就能够。

文章图片

到此我们的刮刮卡制作就结束了，另外假设大家希望再完好，能够把里面非常多常量设置成变量，加入对外的set方法。或者抽取成自己定义属性，在布局文件进行定义都能够~~~
有一点须要说明一下，对于我们刮刮卡这个案例。我们布局文件假设宽高设置为wrap_content。也会占满屏幕，主要是由于我认为刮刮卡这个view不是必需wrap_content；可是假设你希望支持wrp_content，能够參考Android 自己定义View (一) 。

源代码点击下载
---------------------------------------------------------------------------------------------------------

我建了一个QQ群，方便大家交流。
群号：55032675
----------------------------------------------------------------------------------------------------------

博主部分视频已经上线，假设你不喜欢枯燥的文本，请猛戳（初录。期待您的支持）：
1、高仿微信5.2.1主界面及消息提醒
2、高仿QQ5.0側滑

【Android 自己定义控件实现刮刮卡效果真的就仅仅是刮刮卡么】