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

最新推荐文章于 2024-05-16 20:42:16 发布

2401_84121573

最新推荐文章于 2024-05-16 20:42:16 发布

阅读量378

点赞数 3

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84121573/article/details/138076085

版权

程序员专栏收录该内容

196 篇文章 0 订阅

订阅专栏

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” />

运行效果：

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

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

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);

}

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

下面看效果：

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

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

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);

}

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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后：学习总结——Android框架体系架构知识脑图（纯手绘xmind文档）

学完之后，若是想验收效果如何，其实最好的方法就是可自己去总结一下。比如我就会在学习完一个东西之后自己去手绘一份xmind文件的知识梳理大纲脑图，这样也可方便后续的复习，且都是自己的理解，相信随便瞟几眼就能迅速过完整个知识，脑补回来。

下方即为我手绘的Android框架体系架构知识脑图，由于是xmind文件，不好上传，所以小编将其以图片形式导出来传在此处，细节方面不是特别清晰。但可给感兴趣的朋友提供完整的Android框架体系架构知识脑图原件（包括上方的面试解析xmind文档）

除此之外，前文所提及的Alibaba珍藏版 Android框架体系架构 手写文档以及一本 《大话数据结构》 书籍等等相关的学习笔记文档，也皆可分享给认可的朋友！

——感谢大家伙的认可支持，请注意：点赞+点赞+点赞！！！

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

[外链图片转存中…(img-XYmJgsGH-1713768141526)]

最后：学习总结——Android框架体系架构知识脑图（纯手绘xmind文档）

下方即为我手绘的Android框架体系架构知识脑图，由于是xmind文件，不好上传，所以小编将其以图片形式导出来传在此处，细节方面不是特别清晰。但可给感兴趣的朋友提供完整的Android框架体系架构知识脑图原件（包括上方的面试解析xmind文档）
[外链图片转存中…(img-roJ4KNWJ-1713768141527)]

——感谢大家伙的认可支持，请注意：点赞+点赞+点赞！！！

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

2401_84121573

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Android 自定义控件实现刮刮卡效果真的就只是刮刮卡么

学完之后，若是想验收效果如何，其实最好的方法就是可自己去总结一下。比如我就会在学习完一个东西之后自己去手绘一份xmind文件的知识梳理大纲脑图，这样也可方便后续的复习，且都是自己的理解，相信随便瞟几眼就能迅速过完整个知识，脑补回来。下方即为我手绘的Android框架体系架构知识脑图，由于是xmind文件，不好上传，所以小编将其以图片形式导出来传在此处，细节方面不是特别清晰。但可给感兴趣的朋友提供完整的Android框架体系架构知识脑图原件（包括上方的面试解析xmind文档）
复制链接

扫一扫