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

2023-10-11 15:30

本文主要是介绍刮刮卡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

相关文章

Linux实现线程同步的多种方式汇总

《Linux实现线程同步的多种方式汇总》本文详细介绍了Linux下线程同步的多种方法,包括互斥锁、自旋锁、信号量以及它们的使用示例,通过这些同步机制,可以解决线程安全问题,防止资源竞争导致的错误,示例... 目录什么是线程同步?一、互斥锁(单人洗手间规则)适用场景:特点:二、条件变量(咖啡厅取餐系统)工作流

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java Multimap实现类与操作的具体示例

《JavaMultimap实现类与操作的具体示例》Multimap出现在Google的Guava库中,它为Java提供了更加灵活的集合操作,:本文主要介绍JavaMultimap实现类与操作的... 目录一、Multimap 概述Multimap 主要特点:二、Multimap 实现类1. ListMult

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

在Java中将XLS转换为XLSX的实现方案

《在Java中将XLS转换为XLSX的实现方案》在本文中,我们将探讨传统ExcelXLS格式与现代XLSX格式的结构差异,并为Java开发者提供转换方案,通过了解底层原理、性能优势及实用工具,您将掌握... 目录为什么升级XLS到XLSX值得投入?实际转换过程解析推荐技术方案对比Apache POI实现编程

Mysql的主从同步/复制的原理分析

《Mysql的主从同步/复制的原理分析》:本文主要介绍Mysql的主从同步/复制的原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录为什么要主从同步?mysql主从同步架构有哪些?Mysql主从复制的原理/整体流程级联复制架构为什么好?Mysql主从复制注意

IDEA如何实现远程断点调试jar包

《IDEA如何实现远程断点调试jar包》:本文主要介绍IDEA如何实现远程断点调试jar包的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录问题步骤总结问题以jar包的形式运行Spring Boot项目时报错,但是在IDEA开发环境javascript下编译