思想:

将一个View设计成多层,内层(包含中奖信息)和外层(用于刮奖),外层的图层用Canvas与一个Bitmap关联,用这个关联的Bitmap来处理手势的滑动。类似于刮奖的动作。

使用paint.setXfermode 来进行消除手势滑动区域

package com.jackie.guaguale;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View; /**
* Created by Administrator on 2015/7/29.
*/
public class GuaView extends View {
private Path mPath;
private Paint mInnerPaint; //内层图层Paint
private Paint mOuterPaint; //外层图层Paint
private Bitmap mGuaBitmap; //用于处理刮奖的Bitmap
private Bitmap mOuterBitmap; //外层图层Bitmap
private Canvas mCanvas; private int mWidth, mHeight; private float mLastX;
private float mLastY; private String mText; public GuaView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
} private void init() {
mPath = new Path();
mOuterPaint = new Paint();
mInnerPaint = new Paint(); //创建外层图层
mOuterBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka).copy(Bitmap.Config.ARGB_8888, true);
mText = "¥500";
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = mOuterBitmap.getWidth();
mHeight = mOuterBitmap.getHeight(); //创建内层图层
mGuaBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mGuaBitmap);
mCanvas.drawBitmap(mOuterBitmap, 0, 0, null); //将mOuterBitmap画到mCanvas上,与mGuaBitmap关联 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();
return true;
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色 灰色
canvas.drawText(mText, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本
canvas.drawBitmap(mGuaBitmap, 0, 0, null); //绘制外层Bitmap, 将mBitmap显示在界面上
drawPath();
} private void drawPath() {
//使用该mode:dst和src相交后, 仅仅保留dst,且除去相交的部份
mOuterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mOuterPaint);
}
}

效果图例如以下:

Andriod实现刮刮卡的效果的更多相关文章

  1. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  4. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  5. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

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

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  7. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  8. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

  9. 【Android - 自定义View】之自定义View实现“刮刮卡”效果

    首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的“刮刮卡”的效果,即用户可以刮开覆盖层, ...

  10. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

随机推荐

  1. GDB 使用小结

    GDB 使用小结 Gdb 不用说,两个字,非常强大 >.<,我最讨厌不识数的人了 本文适合GDB 初学和没学过的,如果你懂了,可以相互交流 既然说它很强大,它强大在哪里呢? 一般情况下,大 ...

  2. 从React看weight开发

    从当前云发展的势头来看几乎所有互联网应用都趋向大一统的趋势,一个node下面加一堆应用,同时我们项目也趋向把复杂的大应用拆分成多个小应用,通过各种复杂的Api来协作,通信,达到同样的效果. 可以看出, ...

  3. (8)string对象上的操作1

     读写操作 //读写string对象的测试.//本程序输入两string类,输出两string类. #include <iostream> #include <string> ...

  4. 通过重写.htaccess文件添加404

    如果说是用linux服务器的系统 想要给自己的网站设置404怎么弄?如果你不会给自己的Ecs服务器添加服务器管理系统,或是你购买的云虚拟主机没有304.404设置,那么就要通过自己重写文件来设置404 ...

  5. 【C++】智能指针简述(三):scoped_ptr

    在介绍scoped_ptr之前,我们先回顾一下前两篇文章的内容. 首先,智能指针采用RAII机制,通过对象来管理指针,构造对象时,完成资源的初始化;析构对象时,对资源进行清理及汕尾. auto_ptr ...

  6. 15年第六届蓝桥杯第七题_(string)

    手链样式 小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 请你提交该整数.不要填写任 ...

  7. miller_rabin_素性测试

    摘自:http://blog.csdn.net/pi9nc/article/details/27209455 看了好久没看懂,最后在这篇博客中看明白了. 费马定理的应用,加上二次探测定理. Ferma ...

  8. 分析器错误消息: 该配置节不能包含 CDATA 或文本元素。

    原因当然是web.config配置文件中,有字符串文本了,估计不小心加上的一些字符,所以会报错,去掉就行,例如13行的s

  9. Java基础(二)--this关键字及初始化

    构造器: 构造器的名称必须和类名完全相同,所以一般方法的"首字母小写"命名规则并不适合构造器 默认构造器: 也叫无参构造器,作用就是创建一个默认对象,如果你不是手写出来,编译器默认 ...

  10. Spring框架系列(五)--面向切面AOP

    背景: 当需要为多个不具有继承关系的对象引入一个公共行为,例如日志.权限验证.事务等功能时,如果使用OOP,需要为每个对象引入这些公共 行为.会产生大量重复代码,并且不利用维护.AOP就是为了解决这个 ...