Android 自定义控件实现刮刮卡效果
来源:互联网 发布:幼儿园主题网络构图 编辑:程序博客网 时间:2024/04/30 06:01
1简易画板的实现
我们的刮刮卡需要掌握绘图,当然了这里不要求你有美术天分,会瞎涂鸦就可以了~~
下面开始我们的一个简易的画板,其实就是可以在上面画点线条,当然你也可以签个名,我们的View的叫做GuaGuaKa:
1、初步GuaGuaKa
package com.zhy.view;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class GuaGuaKa extends View{/** * 绘制线条的Paint,即用户手指绘制Path */private Paint mOutterPaint = new Paint();/** * 记录用户绘制的Path */private Path mPath = new Path();/** * 内存中创建的Canvas */private Canvas mCanvas;/** * mCanvas绘制内容在其上 */private Bitmap mBitmap;private int mLastX;private int mLastY;public GuaGuaKa(Context context){this(context, null);}public GuaGuaKa(Context context, AttributeSet attrs){this(context, attrs, 0);}public GuaGuaKa(Context context, AttributeSet attrs, int defStyle){super(context, attrs, defStyle);init();}private void init(){mPath = new Path();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width = getMeasuredWidth();int height = getMeasuredHeight();// 初始化bitmapmBitmap = 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);}@Overrideprotected void onDraw(Canvas canvas){drawPath();canvas.drawBitmap(mBitmap, 0, 0, null);}/** * 绘制线条 */private void drawPath(){mCanvas.drawPath(mPath, mOutterPaint);}@Overridepublic 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" /></RelativeLayout>运行效果:
好了,我们的简易画板完成以后,我们开始考虑正题,一步一步逼近我们的刮刮板,现在我们准备这样做,首先在背后绘制一张图片,然后绘制一个遮盖层,然后我们绘画的过程就是擦除遮盖层。
3、擦除的第一次实现
鉴于很多朋友的意见,我决定这次的图片用风景图,远离xxx , 感谢seven提供的图片~
1、绘制遮盖层
其实遮盖层就是一个颜色:
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width = getMeasuredWidth();int height = getMeasuredHeight();// 初始化bitmapmBitmap = 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里面也要做一点修改nc
@Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(mBackBitmap, 0, 0, null); drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); }
好了,到此完成,其实就添加了几行代码,就完成了我们简易画板到刮刮卡的转变;
下面看效果:
有没有拨开云雾见天明的感觉~~
到此我们的刮刮卡的原理,以及初步的实现结束了~~还是很简单的~接下来就是后续的完善工作
4、刮刮卡的完善
我们准备把奖项改为字体,将字体绘制在屏幕的中间;
那么直接把上例绘制图片改为绘制字体就行了,不过多了一个绘制字体画笔的设置:
有变化的代码:java] view plaincop
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时,我们直接展现刮奖区
protected void onDraw(Canvas canvas) { drawBackText(canvas); if (!isComplete) { drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); } }
到此刮奖区的计算就结束了。
下面在演示前,我做了一些简单的美化,具体大家到时候看源码就可以。
到此我们的刮刮卡制作就结束了,另外如果大家希望再完善,可以把里面很多常量设置成变量,添加对外的set方法,或者抽取成自定义属性,在布局文件进行定义都可以~~~
有一点需要说明一下,对于我们刮刮卡这个案例,我们布局文件如果宽高设置为wrap_content,也会占满屏幕,主要是因为我觉得刮刮卡这个view没必要wrap_content;
- Android 自定义控件实现刮刮卡效果
- android自定义控件自动换行效果实现
- android自定义控件自动换行效果实现
- android自定义控件实现自动换行效果
- Android自定义控件简单实现ratingbar效果
- android自定义控件自动换行效果实现
- Android自定义控件实现雷达效果
- android 自定义控件样式点击效果实现
- Android自定义实现刮刮卡效果
- android 自定义控件实现3D画廊效果
- Android学习之动画效果的实现、自定义控件皮肤
- Android自定义控件_水流波动效果的实现WaveView
- Android 自定义控件之实现雷达扫描效果
- android自定义控件SlidingButtonView实现类似QQ滑动删除效果
- Android自定义控件10----继承View实现水波纹效果
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- Centos 配置eth0 提示Device does not seem to be present
- 【汇编语言/底层开发】4、使用masm编译、链接汇编源文件
- Arcpy基础入门-1、如何使用arcpy
- 微信公共账号学习笔记 _ 感想 爪机码字
- KVC的运算
- Android 自定义控件实现刮刮卡效果
- 【ACMER纷纷表示】女生应该找一个玩ACM的男生
- Java8 Lamdba表达式 002
- 菜鸟nginx源码剖析数据结构篇(四)红黑树ngx_rbtree_t
- 一些问题的罗列以及解决
- linux 添加受限用户 SSH登录
- 七年IT工作经验的七个总结
- ubuntu12.04lts下安装python3
- Mac下的Sublime Text 3 安装go插件GoSublime, SideBarEnhancements,Go Build,Godef