> 软件编程 > 安卓开发 >

Android自定义刮刮卡实现 2017-07-24 15:28　出处：清屏网　人气：　

关于刮刮卡的实现效果不需要做太多解释，特别是在电商APP中，每当做活动的时候都会有它的身影存在，趁着美好周末，来实现下这个效果，也算是对零碎知识点的一个整合。

刮刮卡实现效果

刮刮卡实现效果.gif

所涉及的知识点：

1、自定义View的一些流程

2、双缓冲绘图机制

3、Paint的绘图模式

4、触摸事件的一些流程

5、Bitmap的相关知识

实现思路：

其实非常简单，首先我们需要确定所要绘图的区域，然后对这块区域进行多层的绘图（背景层，前景层），然后去监听触摸事件，把手指触摸的区域的前景层给消除即可。

首先我们先来实现一个简单版的：

步骤：

1、绘制图片作为背景层

2、绘制一张和背景层大小一致的灰色图层作为前景层

3、监听手指的触摸区域，把对应区域的前景层消除

1、首先绘制图片作为背景层，这个太简单了，我们把资源文件转成Bitmap对象，然后利用onDraw(Canvas canvas)里的Canvas画出来即可。

//背景图 mBackGroundBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background); @Override protected void onDraw(Canvas canvas) { //绘制背景层 canvas.drawBitmap(mBackGroundBitmap, 0, 0, null); }

2、再来绘制一张和背景层大小一致的灰色图层作为前景层，这里我们需要用到绘图的双缓冲机制（这里的缓冲区指Bitmap对象）。

双缓冲机制：先将要绘制的图形以对象的形式存放在内存中，作为绘制缓冲区，然后在这个对象上进行一系列的操作，然后再将其绘制到屏幕，避免过多的操作使得在绘制的过程中出现屏幕闪烁现象。

//背景图 mBackGroundBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background); //创建一个和背景图大小一致的Bitmap对象作为装载画布 mForeGroundBitmap = Bitmap.createBitmap(mBackGroundBitmap.getWidth(), mBackGroundBitmap.getHeight(), Config.ARGB_8888); //与Canvas进行绑定 mCanvas = new Canvas(mForeGroundBitmap); //涂成灰色 mCanvas.drawColor(Color.GRAY); @Override protected void onDraw(Canvas canvas) { //绘制背景层 canvas.drawBitmap(mBackGroundBitmap, 0, 0, null); //绘制前景层 canvas.drawBitmap(mForeGroundBitmap, 0, 0, null); }

运行此时的代码，你会发现背景层已经和前景层融为一体（其实是2个图层，类似于PS里的图层叠加）

3、监听手指的触摸区域，把对应区域的前景层消除，这里我们需要用到一个技巧，在Paint画笔API中给我们提供了一个PorterDuffXfermode，它有点想数学里的交并集，是用来控制两个图像之间的混合显示模式。

来自Graphics下的XferModes

在这里它会先去绘制DST层再绘制SRC层，那么对应着下来就是背景层（DST）和前景层（SRC），那么在这个图像我们怎么去选择模式呢？

这里我们需要取的是背景层的内容，也就是DST和 SRC的交集，然后内容区域显示DST，那么也就是DstIn模式，来看下关于画笔Paint的设置。

mPaint = new Paint(); mPaint.setAlpha(0); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setStrokeWidth(80); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

然后我们重写onTouchEvent在手指按下屏幕和滑动屏幕的时候利用Path去记录我们想要擦除的路径即可。

@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastX = (int) event.getX(); mLastY = (int) event.getY(); mPath.moveTo(mLastX, mLastY); break; case MotionEvent.ACTION_MOVE: mLastX = (int) event.getX(); mLastY = (int) event.getY(); mPath.lineTo(mLastX, mLastY); break; case MotionEvent.ACTION_UP: break; default: break; } mCanvas.drawPath(mPath, mPaint); invalidate(); return true; }

接下来我们来实现一个完整版的刮刮卡：

步骤：

1、绘制中奖信息作为背景层

2、绘制一张和中奖信息同等大小的刮奖封面作为前景层

3、监听手指的触摸区域，把对应区域的前景层消除

步骤1、2、3和前面大体一致，这里我就不详细说了，来讲一下需要注意的几个点：

1、在绘制中奖信息（文本）的时候，如何确定绘制的位置：

关于文字位置的确定

首先我们需要知道任何的控件在Android的布局中外层都是一个矩形的，A代表刮刮卡绘制区域，B代表中奖信息绘制区域，所以在这里我们绘制文本信息的起始点应该是A布局宽的一半减去B布局宽的一半，同理，高也应该是A布局高的一半减去B布局高的一半，这里我们把B布局，也就是文字控件的大小信息用一个Rect对象来存储，而这里的A布局即为Bitmap背景图的大小。

//文字画笔 mTextPaint = new Paint(); mTextPaint.setAntiAlias(true); mTextPaint.setColor(Color.GREEN); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setTextSize(30); mTextPaint.getTextBounds(mText, 0, mText.length(), mRect); @Override protected void onDraw(Canvas canvas) { canvas.drawText(mText, mBitmap.getWidth() / 2 - mRect.width() / 2, mBitmap.getHeight() / 2 + mRect.height() / 2, mTextPaint); }