刮刮卡android代码,Android刮刮卡实现原理与代码讲解

2023-10-11 15:30
文章标签 代码 实现 android 讲解 原理 刮刮卡

本文主要是介绍刮刮卡android代码,Android刮刮卡实现原理与代码讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现刮刮卡我们可以Get到哪些技能？

* 圆形圆角图片的实现原理

* 双缓冲技术绘图

* Bitmap获取像素值数据

* 获取绘制文本的长宽

* 自定义View的掌握

* 获取屏幕密度

* TypeValue.applyDemension

* Canvas的一些绘制方法

* Paint的一些常用的属性

* Path的一些方法

刮刮卡的实现原理图

ac5fccb9bad3d820af9f3aa1a1124991.png

这里用到了13中模式中的DstOut这种模式。

对于这幅图而言，首先绘制Dst，设置xfermode，再绘制Src。

刮刮卡的实现原理步骤

1.绘制显示中奖的文本

2.绘制图层区/前景图片

3.设置xfermode

4.绘制Path

5.清除所有图层区方案

6.自定义属性

代码讲解

第一部分：绘制中奖信息

public class GuaGuaLe extends View{

/**中奖文本变量*/

private String mText;//显示文本

private Paint mTextPaint;//绘制文本的画笔

private Rect mTextBounds;//文本的边界

public GuaGuaLe(Context context) {

this(context, null);

}

public GuaGuaLe(Context context, AttributeSet attrs) {

super(context, attrs);

initView();

}

/**初始化一些实例变量*/

private void initView() {

setTextMessage();//实例化文本的一些变量

}

private void setTextMessage() {

mText = "谢谢惠顾";

mTextBounds = new Rect();

mTextPaint = new Paint();

mTextPaint.setAntiAlias(true);

mTextPaint.setColor(Color.DKGRAY);

mTextPaint.setTextSize(22);

mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//获取到绘制文本的长宽

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@Override

protected void onDraw(Canvas canvas) {

//绘制文本

canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);

}

}

如下图：

a667368919f4c35a5162b51aa6c05c9d.png

第二部分：绘制图层区/前景图片

/**画板变量*/

private Canvas mCanvas;//缓冲画板

private Bitmap mLayerBimtap;//图层图片

private Bitmap mBitmap;//画板上的画纸

private Paint mPaint;//画笔

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

setCanvasMessage(getMeasuredWidth(),getMeasuredHeight());//实例化缓存画板的一些变量

}

/***

* 双缓冲技术

* 1.创建一个与屏幕绘制区域一致的Canvas对象

* 2.先将图形绘制到内存中

* 3.再一次性将对象上的图形拷贝到屏幕上

* @param width

* @param height

*/

private void setCanvasMessage(int width,int height) {

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setStyle(Paint.Style.FILL);

mPaint.setStrokeWidth(3);

mPaint.setColor(Color.parseColor("#c0c0c0"));

mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//创建一个空白的位图

mCanvas = new Canvas(mBitmap);//在此Bitmap上作画

//mCanvas.drawColor(Color.parseColor("#c0c0c0"));//绘制背景颜色

mCanvas.drawRoundRect(new RectF(0, 0, width, height), 20, 20, mPaint);//绘制圆角矩形

mLayerBimtap = BitmapFactory.decodeResource(getResources(), R.mipmap.fg_guaguaka);

mCanvas.drawBitmap(mLayerBimtap, null, new RectF(0, 0, width, height), null);//绘制图层图片

@Override

protected void onDraw(Canvas canvas) {

//绘制文本

canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);

//绘制图层

//canvas.drawBitmap(mBitmap,0,0,null);

//绘制图层图片

canvas.drawBitmap(mBitmap,0,0,null);

}

}

如下图(图层颜色)：

4bc62c05079a47905c55c370484b4915.png

如下图(图层图片)：

102b6edb5bee3974fd961f34ec432e6f.png

第三部分：设置xfermode以及绘制Path

/**路径变量*/

private Path mPath;

private Paint mPathPaint;

private int mLastX;//记录上一次X坐标

private int mLastY;//记录上一次Y坐标

/**初始化一些实例变量*/

private void initView() {

setTextMessage();//实例化文本的一些变量

setPathMessage();//实例化路径的一些变量

}

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

case MotionEvent.ACTION_UP:

break;

default:

break;

}

invalidate();//主线程中刷新

return true;//截取事件向下分发

}

@Override

protected void onDraw(Canvas canvas) {

//绘制文本

canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);

//绘制路径

drawPath();

//绘制图片【图层背景颜色】

//canvas.drawBitmap(mBitmap,0,0,null);

//绘制图片【图层图片】

canvas.drawBitmap(mBitmap, 0, 0, null);

}

//返回给系统的canvas是一幅带有路径的位图

private void drawPath() {

//这之前是设置了图层图片

mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

mCanvas.drawPath(mPath,mPathPaint);

}

如下图

bd449ec13cc2c6b3b06c049fd8782683.png

第三部分：清除所有图层区方案

/**擦除是否完成*/

private volatile boolean isComplete;

/**回调接口*/

private OnCompleteListener mOnCompleteListener;

public interface OnCompleteListener{

void complete();

}

//对外设置调用的公开方法

public void setmOnCompleteListener(OnCompleteListener mOnCompleteListener){

this.mOnCompleteListener = mOnCompleteListener;

}

case MotionEvent.ACTION_UP:

//开启一个线程去计算擦除的面积

new Thread(new Runnable() {

@Override

public void run() {

int width = getWidth();

int height = getHeight();

int area = 0;//记录被擦数的范围大小

int percent ;

for(int i=0;i

for(int j = 0;j

if(mBitmap.getPixel(i,j) == 0){

area ++;

}

}

if(area > 0){

percent = area *100/(width*height);

if(percent > 20){

isComplete = true;

postInvalidate();//在子线程中刷新，可能比较耗时操作

}

}

}

}).start();

@Override

protected void onDraw(Canvas canvas) {

//绘制文本

canvas.drawText(mText, getWidth() / 2 - mTextBounds.width() / 2, getHeight() / 2 + mTextBounds.height() / 2, mTextPaint);

if(isComplete){

if(mOnCompleteListener != null){

mOnCompleteListener.complete();//接口回调，在主线程中

}

}

if(!isComplete){

//绘制路径

drawPath();

//绘制图片【图层背景颜色】

//canvas.drawBitmap(mBitmap,0,0,null);

//绘制图片【图层图片】

canvas.drawBitmap(mBitmap, 0, 0, null);

}

}

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);

//注册了一个观察者

guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {

@Override

public void complete() {

Toast.makeText(MainActivity.this, "用户绘制了大部分", Toast.LENGTH_SHORT).show();

}

});

}

}

如下图：

530b0195c776a269bd8d3a8a025316a8.png

第五部分：自定义View的属性

在values/attrs.xml中定义

在布局文件中定义属性

android:id="@+id/guaguale"

android:layout_width="350dp"

android:layout_height="200dp"

app:text="$5,000"

app:textColor="#c02040"

app:textSize="22sp"

android:layout_centerInParent="true"/>

在主界面中定义Text文本

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);

//注册了一个观察者

guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {

@Override

public void complete() {

Toast.makeText(MainActivity.this, "用户绘制了大部分", Toast.LENGTH_SHORT).show();

}

});

guaguaLeView.setTextByUser("Android 新技能Get");

}

}

/**中奖文本变量*/

private String mText;//显示文本

private Paint mTextPaint;//绘制文本的画笔

private Rect mTextBounds;//文本的边界

//以下两个是新增的

private int mTextSize;//文本大小

private int mTextColor;//文本颜色

//对外设置调用的设置文本公开方法

public void setTextByUser(String text){

mText = text;

mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//重新计算文本的范围

}

在构造函数中定义

public GuaGuaLe(Context context, AttributeSet attrs) {

super(context, attrs);

//获取自定义属性的值

TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.GuaGuaLe);

mText = a.getString(R.styleable.GuaGuaLe_text);

mTextColor = a.getColor(R.styleable.GuaGuaLe_textColor, Color.parseColor("#c0c0c0"));

//TypedValue.applyDimension内部就是将sp,dp转化为px

mTextSize = a.getDimensionPixelSize(R.styleable.GuaGuaLe_textSize, (int) TypedValue.applyDimension

(TypedValue.COMPLEX_UNIT_SP,22,getResources().getDisplayMetrics()));

a.recycle();

initView();

}

如下图：

b3d1b079dbfc5d2b910d78fa0a4680a2.png

下图是用户自行设置的文本

9b1d91e84192db216fce5c57bab64ff2.png

经过上面几个步骤，就可以完成呱呱卡的实现效果了。

总结一下：

(1)圆形圆角图片的原理

1.绘制图片

2.paint.setXfermode(DstIn); – 取交集以先绘制的图层为主 Dst是背景图片

3.绘制圆形图片

1.绘制圆形图片

2.paint.setXfermode(SrcIn); – 取交集以后绘制的图层为主 Src是结构图片

3.绘制图片

(2)双缓冲技术绘图【在内存中绘制，再一次性位图拷贝到屏幕上】

1.在内存中创建与画布一致宽高的canvas

2.在缓冲区画图

3.将缓冲区位图拷贝到当前画布上

4.释放缓冲区

自己的理解是：在内存中定义一个画板，然后在上面绘图，将绘图结果放在一个Bitmap中，最后让系统的Canvas绘制这个Bitmap

(3)Bimtap获取像素数据(方式一)

bm.getPixels(x,y) 直接获取x,y坐标处的像素点数据

(4)获取绘制文本的长宽的(方式一)

1.计算文字所在的矩形，获取宽高[Rect]

Rect rect = new Rect();

paint.getTextBounds(str,0,str,length,rect);

int w = rect.width;

int h = rect.height;

(5)自定义View

1.在values目录下新建attrs.xml文件

2.设置属性有text,textColor,textSize

3.在布局文件中引用

4.在构造函数中获取自定义属性

5.对外提供方法，让用户动态的设置中奖信息

(6)获取屏幕密度(方式一)

DisplayMetrics dm = getResource().getDisplayMetrics();

float density = dm.density; – 像素比例(0.75/1.0/1.5/2.0/3.0/4.0)显示的就是px/dp的比例

int densityDpi = dm.densityDpi; – 每寸像素(120/160/240/320/480/640)

int screenWidth = dm.widthPixels; – 宽像素

int screenHeight = dm.heightPixels; – 高像素

(7)Canva的一些方法

drawColor 绘制背景颜色

drawText 绘制文本

drawBitmap 绘制图片

【drawBitmap(bitmap,x,y,paint) – 将图画到指定坐标】

【drawBitma(bitmap,srcRect,dstRect,paint) – 将图指定区域其参数是四个顶点的坐标，左上右下】

drawRoundRect 绘制圆角矩形

【drawRoundRect(rectf,rx,ry,paint) – rx(x方向上的圆角半径) ry(y方向上的圆角半径)】

(8)Paint的一些常用属性

setColor/setARGB 设置绘制颜色

setAlpha 设置绘制透明度

setAntiAlias 设置平滑

setDither 设置图像抖动

setStyle 设置画笔的样式

setStrokeWidth 设置画笔的宽度

setXfermode 设置图形重叠时处理方式

setStrokeJoin 设置图形结合方式

setTextSize 设置文本的大小、

(9)Path(将View上的N个点连成一条“路径”，然后调用Canvas的drawPath绘制图形)的一些方法

reset 清除path

moveTo(x,y) 将起始点移至x,y坐标点

lineTo 绘制直线

quadTo 绘制曲线

以上就是本文的全部内容，你中奖了吗？希望对大家的学习有所帮助。

这篇关于刮刮卡android代码,Android刮刮卡实现原理与代码讲解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/189032。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
hdu4407(容斥原理)

hdu4407(容斥原理)

题意：给一串数字1,2，......n，两个操作:1、修改第k个数字，2、查询区间[l,r]中与n互质的数之和。 解题思路：咱一看，像线段树，但是如果用线段树做，那么每个区间一定要记录所有的素因子，这样会超内存。然后我就做不来了。后来看了题解，原来是用容斥原理来做的。还记得这道题目吗？求区间[1,r]中与p互质的数的个数，如果不会的话就先去做那题吧。现在这题是求区间[l,r]中与n互质的数的和
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2