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);
    }
}

效果图如下:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 07-29

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

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

刮刮卡需求: 每一位用户有三次刮刮卡的机会 本次刮刮卡的结果会覆盖上次的结果 刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖) 刮出的结果包含按钮既(领取奖品 or 再来一次 ) 分享活动奖品升级(这里主要是微信分享的回调了) 我们自己的需求,今天就说怎么制作刮刮卡,有这样需求的可以找我要源码 第一.body创建Canvas <div class="info" id="prize"> <span id="prompt"

使用HTML5实现刮刮卡效果

原文地址:http://www.phpthinking.com/archives/525 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. 点击下载源码 HT

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

[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上面随意作画,这次,美术同学又本着把程序员折腾到底的态度,提出了又一奇葩需求,由于原需求设计商业机密,这里仅举个同理的例子说明. 附带福利图一张: 神马?没看够?还想看看其他人?请看耐心完全文 要做到上面的效果,glBlendFunc是个很好的选择.glBlendFunc是一个设置图像叠加方式的函数,就是把一张

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

一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文<Android实现自定义圆形.圆角和椭圆ImageView(使用Xfermode图形渲染方法)>, 今天我们来看看如何实现电商app里常用到的刮刮卡效果的view组件,其实原理和实现圆角图片的差不多,都是使用Xfermode渲染模式来实现的. (老规矩,源码在博文最后给出哈) 基本原理步骤是这样的

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

很久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类例子也比较多了,大家可以百度看看~不过还是通过本例子,带大家发掘一下,里面隐含的知识~ 1.Xfermode以及PorterDuff 如果大家还记得,曾经在博客:完美实现图片圆角和圆形 简单介绍过圆角的实现原理也是基于这个. 首先我们看一下官方的例子,很好的展示了16种Mode的效果: 注:先绘制的Dst,再绘制的Src. 好了,看了这个图,我来问大家几个问题: 问题1.如果我想实现

canvas实现移动端和PC端刮刮卡效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

封装了一个H5刮刮卡插件

下班后,闲着无事,刚好近期在学习画布相关知识,就写了个demo练一下手.高手路过,多多指点! 简单介绍一下页面整体结构: 1 <div class="wrap"> 2 <canvas class="page can" id="can" width="640" height="1136"></canvas> 3 <div class="page index&

Android 刮刮卡

好久没有写博客了,今天有正好有时间,接下来为大家带来一款电商中要使用的刮刮卡项目,刮刮卡相信大家小时候都玩过,那个时候,可能大家使用的是小纸片的,现在也可以带大家重温小时候的美好时光,今天将这个刮刮卡的项目分享给大家,希望对大家有学习和工作上的帮助. 一:先上效果图 二:原理分析 1.创建一张你想要的bitmap大小,然后根据bitmap的大小,绘制一张画布在上面,然后重写onDraw()方法 2.在刮开面积的不断扩张中,计算扩张面的面积大小,当面积超过60%的时候,就清楚图层 3.下面的刮刮卡

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

Atitit .html5刮刮卡的gui实现总结

Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....postion:absoluti..高度宽度都是100% 1 #---2.初始化wScratchPad 1 #-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2 #-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/no