Android App中实现简单的刮刮卡抽奖效果的实例详解

主要思想:
将一个view设计成多层:背景层,含中奖信息等;
遮盖层,用于刮奖,使用关联一个Bitmap的Canvas
在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作)
使用paint.setXfermode 来进行消除手势滑动区域

public class GuaView extends View { private Bitmap mBitmap; //遮盖的图层 private Canvas mCanvas; //绘制遮盖图层 private Paint mOuterPaint; private Path mPath; private float mLastX; private float mLastY; private Bitmap mCoverBitmap; //遮盖图 private int mWidth, mHeight; private Paint mInnerPaint; private String mInfo; public GuaView(Context context) { this(context, null); } public GuaView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { mPath = new Path(); mOuterPaint = new Paint(); mInnerPaint = new Paint(); mCoverBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fg_guaguaka); mInfo = "¥ 5 0 0"; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = mCoverBitmap.getWidth(); mHeight = mCoverBitmap.getHeight(); setMeasuredDimension(mWidth, mHeight); mBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); mCanvas.drawBitmap(mCoverBitmap, 0, 0, null); setOuterPaint(); setInnerPaint(); } private void setInnerPaint() { mInnerPaint.setColor(Color.RED); mInnerPaint.setStyle(Paint.Style.STROKE); mInnerPaint.setStrokeCap(Paint.Cap.ROUND); mInnerPaint.setStrokeJoin(Paint.Join.ROUND); mInnerPaint.setAntiAlias(true); mInnerPaint.setDither(true); //防抖 mInnerPaint.setStrokeWidth(5); mInnerPaint.setTextSize(100); mInnerPaint.setTextAlign(Paint.Align.CENTER); } private void setOuterPaint() { mOuterPaint.setColor(Color.GREEN); mOuterPaint.setStyle(Paint.Style.STROKE); mOuterPaint.setStrokeCap(Paint.Cap.ROUND); mOuterPaint.setStrokeJoin(Paint.Join.ROUND); mOuterPaint.setAntiAlias(true); mOuterPaint.setDither(true); //防抖 mOuterPaint.setStrokeWidth(20); } @Override //Path public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(x, y); break; case MotionEvent.ACTION_MOVE: float deltaX = Math.abs(x - mLastX); float deltaY = Math.abs(y - mLastY); if (deltaX > 5 || deltaY > 5) { mPath.lineTo(x, y); } mLastX = x; mLastY = y; break; case MotionEvent.ACTION_UP: break; } invalidate();//调用onDraw return true; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色 灰色 canvas.drawText(mInfo, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本 canvas.drawBitmap(mBitmap, 0, 0, null); //绘制mBitmap 这是一个可变的bitmap,通过mCanvas绘制,首先绘制了mCoverBitmap drawPath(); } private void drawPath() { //使用该mode:dst和src相交后, 只保留dst,且除去相交的部份 mOuterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); mCanvas.drawPath(mPath, mOuterPaint); } }

Paint.Join 连续画笔衔接时:

MITER 在外边缘以一个锐角连接         ROUND 以圆弧         BEVEL 以直线

Paint.Cap 指定对于 线和路径(lines and paths) 的开始和结束点的处理方式:

BUTT  ends with the path  不超越它         ROUND  with the center at the end of the path 半圆         SQUARE  with the center at the end of the path 方形

时间: 2024-09-21 12:25:14

Android App中实现简单的刮刮卡抽奖效果的实例详解的相关文章

Android App中实现简单的刮刮卡抽奖效果的实例详解_Android

主要思想: 将一个view设计成多层:背景层,含中奖信息等: 遮盖层,用于刮奖,使用关联一个Bitmap的Canvas 在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作) 使用paint.setXfermode 来进行消除手势滑动区域 public class GuaView extends View { private Bitmap mBitmap; //遮盖的图层 private Canvas mCanvas; //绘制遮盖图层 privat

Android 两个Fragment之间的跳转和数据的传递实例详解

Android  两个Fragment之间的跳转和数据的传递实例详解 作为一个Android的菜鸟,前些天在做项目的时候用到了fragment,需求是从一个Fragment跳转到另一个Fragment,并且还要传递数据,就像Activity的跳转一样.在网上找了好久都没找到很好的列子,最后通过看别人的博客和查文档终于做好了,现在整理一下,希望能帮助有需要的童鞋. 1.首先在第一个Fragment 里面拿到FragmentManger 和FragmentTransaction 代码如下. @Ove

jQuery中通过ajax调用webservice传递数组参数的问题实例详解_jquery

下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun

Android App中实现可以双击放大和缩小图片功能的实例

先来看一个很简单的核心图片缩放方法: public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "s

java中的equals()和toString()方法实例详解_java

java中的equals()和toString()方法 , 这里写个小例子帮助大家学习理解此部分知识. /* 所有对象的父类Object Object中的方法: equals() 对象是否相同的比较方法 toString()对象的字符串表现形式 */ class Person { String name; int age; Person(String name, int age) { this.name = name; this.age = age; } } class ObjectDemo {

在Android app中实现九(n)宫格图片连续滑动效果_Android

  今天写这篇文章的缘由是前一段时间一个网友在我的博客上面留言,想要实现在GridLayout(相当于九宫格)中点击每项可左右滑动显示该宫格的图片,当该宫格的图片显示完以后,接着显示下一宫格的图片.那么看过我以前关于滑动方面的文章的朋友,相信要实现前者的效果并不难,关键在于如何实现后者,即如何在一个宫格的图片显示完以后,接着显示下一宫格的图片.那么这就是我们今天这篇文章要探讨的内容. 说到这里呢,首先对这位网友说声抱歉,由于前些日子太忙,直到现在有那么一点时间来写这篇文章,毕竟平常工作也比较忙,

在Android app中实现九(n)宫格图片连续滑动效果

今天写这篇文章的缘由是前一段时间一个网友在我的博客上面留言,想要实现在GridLayout(相当于九宫格)中点击每项可左右滑动显示该宫格的图片,当该宫格的图片显示完以后,接着显示下一宫格的图片.那么看过我以前关于滑动方面的文章的朋友,相信要实现前者的效果并不难,关键在于如何实现后者,即如何在一个宫格的图片显示完以后,接着显示下一宫格的图片.那么这就是我们今天这篇文章要探讨的内容. 说到这里呢,首先对这位网友说声抱歉,由于前些日子太忙,直到现在有那么一点时间来写这篇文章,毕竟平常工作也比较忙,不能

Android开发中的简单设置技巧集锦_Android

本文实例总结了Android开发中的简单设置技巧.分享给大家供大家参考,具体如下: 1开机图片: android-logo-mask.png android-logo-shine.png 这两个图片一个在上一个在下 ./out/target/common/obj/JAVA_LIBRARIES/android_stubs_current_intermediates/classes/assets/images/android-logo-shine.png ./frameworks/base/core

Android App中各种数据保存方式的使用实例总结_Android

少量数据保存之SharedPreferences接口实例SharedPreferences数据保存主要是通过键值的方式存储在xml文件中 xml文件在data/此程序的包名/XX.xml. 格式: <?xml version='1.0' encoding='utf-8' standalone='yes' ?> <map> <int name="count" value="3" /> <string name="ti