Android刮刮卡原理及实现

最新推荐文章于 2021-05-26 06:11:17 发布

gray_dog3

最新推荐文章于 2021-05-26 06:11:17 发布

阅读量1.6k

点赞数 2

分类专栏： UI 文章标签：刮刮卡自定义View

本文链接：https://blog.csdn.net/lishuangling21/article/details/50772253

版权

这篇博客详细介绍了如何在Android中实现刮刮卡效果。刮刮卡由两层组成，上面是涂层，下面是图像。通过监听手指滑动，记录路径，并使用特殊画笔使路径上的涂层变为透明，从而露出下方的图像。文中通过代码示例讲解了整个实现过程，包括绘制底层图像、涂层，以及处理手指移动轨迹和设置透明效果。

摘要由CSDN通过智能技术生成

本篇讲的内容比较简单，就是实现一个刮刮卡的效果，上面是一个蒙层，下面是你要刮出来的图像。我看到有很多相关的博客，但是还是决定自己写一篇。原因是对我这种菜鸟来说，刚开始做的时候，因为画错了画布，一直都显示不出来，各种怀疑，然后一句句看了好几遍，最后才找到，哦，原来自己画错了画布。当然，一些大神讲的时候由于篇幅有限，有时候又故意要展示多个知识点，当我这种菜鸟去看的时候，总觉得没有讲到痛点。好多次，做一个东西，我不明白的地方各位大神都没讲，我明白的地方他们都重复了。所以有时候还是感觉太浪费时间了。我尽量只讲本篇用到的知识点，保证尽量讲的简单些，那些大神不屑于讲基础知识就由我来码吧。

废话少说。先说原理吧：

andriod中的刮刮卡和现实中的其实一样，是两层，上面一层是涂料，遮住下面的那层。刮的时候只要把手指划过的地方，上面那层涂层变成透明，下面那层也就显示出来了。其实重点就在于手指划过的地方怎么变透明。

先说基础的，我们在画布Canvas A上先画出下面那层，根据资源生成一个名为mBgBitmap的Bitmap对象，在View绘制时，也就是在onDraw方法里面去把它画出来，注意这里用最后一个参数传null就是没有设置画笔属性，用默认的效果：

mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl);

protected void onDraw(Canvas canvas) {
    //先把底层的画画到View的画布上
    canvas.drawBitmap(mBgBitmap, 0, 0, null);
}

在另一张画布Cavas B上画出遮盖层（可以是一层颜色涂层，也可以是一张图片），此处涂了一层灰色。先获取View的宽高，然后生成一张Bitmap。Config.ARGB_8888表示设置Bitmap的颜色格式为ARGB格式，8位的颜色深度：

 	int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        //画涂层的画布,传一个Bitmap进去,所画的信息都存在Bitmap上.
        mCanvas = new Canvas(mBitmap);
        mCanvas.drawColor(Color.parseColor("#c0c0c0"));

然后在B上再把路径画上去，先设置画笔，画布还是刚刚绘涂层的画布，至于mPath怎么保存手指移动路径的，后面会有详细代码：