Andriod实现刮刮卡的效果
思想:
将一个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实现刮刮卡的效果的更多相关文章
- qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- 使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
- Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...
- canvas实现刮刮卡效果
canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...
- 【Android - 自定义View】之自定义View实现“刮刮卡”效果
首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的“刮刮卡”的效果,即用户可以刮开覆盖层, ...
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
随机推荐
- Rxjava1升级Rxjava2踩坑一记
Rxjava1升级Rxjava2坑 共存问题 通常情况下,如果我们希望在一个模块中既想使用rxjava1又想使用rxjava2,这个时候在运行的时候会出现一下报错: ... APK META/-INF ...
- 网页内容爬取:如何提取正文内容 BEAUTIFULSOUP的输出
创建一个新网站,一开始没有内容,通常需要抓取其他人的网页内容,一般的操作步骤如下: 根据url下载网页内容,针对每个网页的html结构特征,利用正则表达式,或者其他的方式,做文本解析,提取出想要的正文 ...
- CAD得到指定条件的实体
主要用到函数说明: IMxDrawSelectionSet::Select2 构造选择集.详细说明如下: 参数 说明 [in] MCAD_McSelect Mode 构造选择集方式 [in] VARI ...
- 07C语言程序语句
C语言程序语句 判断语句 if(表达式) {语句} #include <stdio.h> int main(){ printf("请输入2个数字:"); int a,b ...
- Plan & Future
以下是OI省选前的数据结构与算法整理,可能还不是很全面.但是已经是全网相对比较全面的了.所有标记为“基础”“进阶”“中级”“提高”的知识为近些年来NOIp考察的内容,需重点掌握. 所有“高级”部分为N ...
- db2 group by的疑惑。
按借据号分组,显示每组的条数:
- 将node-webkit打包后文件用nsis再打包成安装包
- 【代码段】Android Studio使用DatePicker选择日期
布局文件中放一个TextView就好了 Java文件如下: public class TestDatePickerActivity extends AppCompatActivity { privat ...
- Python数据分析与展示(1)-数据分析之表示(1)-NumPy库入门
Numpy库入门 从一个数据到一组数据 维度:一组数据的组织形式 一维数据:由对等关系的有序或无序数据构成,采用线性方式组织. 可用类型:对应列表.数组和集合 不同点: 列表:数据类型可以不同 数组: ...
- [luoguP1736] 创意吃鱼法(DP)
传送门 f[i][j][0] 表示从右下角到左上角,以(i,j)为起点能延伸的最大值 f[i][j][1] 表示从左下角到右上角,以(i,j)为起点能延伸的最大值 up[i][j] 表示(i,j)上面 ...