关闭

刮刮卡功能的具体实现

标签: android刮刮卡刮奖刮刮乐
1734人阅读 评论(0) 收藏 举报
分类:

今天整理之前的代码,忽然看到之前自己写的一个刮刮卡,整理下以便以后使用,同时分享给需要的朋友,如有错误,还请多多指正。

这里写图片描述

这里写图片描述

实现的步骤,其实就是徒手画三个图层叠加在一起,最上层是绘制需要的问题,就是以上所述的“骚年,刮我吧”,第二层就是覆盖宽高的灰层,第三层是结果层,多的不啰嗦了,具体实现如下,附上详细注释。

/**
 * 
 * created by zero on 2016-9-9
 * 
 * 刮刮卡
 * 
 */
public class ScratchView extends View
{

    public ScratchView(Context context)
    {
        super(context);
        init();
    }

    private Canvas mCanvas = null;
    private Path mPath = null;
    private Paint mPaint = null;

    // 定义画布的宽和高
    private int screenWidth = 720;
    private int screenHeight = 360;
    private Bitmap bitmap = null;

    private void init() {
        // TODO Auto-generated method stub
        mPath = new Path();
        bitmap = Bitmap.createBitmap(screenWidth, screenHeight,
                Config.ARGB_8888);

        // 对mPaint的设置
        mPaint = new Paint();
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);
        mCanvas = new Canvas();
        mPaint.setDither(true);
        // 设置画笔为空心
        mPaint.setStyle(Style.STROKE);
        // 设置线宽,即每次擦除的宽度
        mPaint.setStrokeWidth(10);
        mPaint.setStrokeCap(Cap.ROUND);
        mPaint.setStrokeJoin(Join.ROUND);
        // 设置图形重叠时的处理方式,一共有16种方式,有兴趣可自己查阅
        mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        mPaint.setAlpha(0);

        mCanvas = new Canvas(bitmap);
        mCanvas.drawColor(Color.parseColor("#c0c0c0"));
        setBitmapText();
    }

    private void setBitmapText() {
        Paint paint = new Paint();
        paint.setTextSize(40);
        paint.setColor(Color.parseColor("#9f9fa0"));
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setFakeBoldText(true);

        Canvas canvas = new Canvas(bitmap);
        canvas.drawColor(Color.alpha(0));
        canvas.rotate(-20);
        // 遍历绘制文字
        for (int i = 0; i < screenWidth + 200; i += 300)
        {
            for (int j = 0; j < screenHeight + 200; j += 60)
            {
                canvas.drawText("刮我吧,骚年!", i, j, paint);
            }
        }
        setScratchBackground("一等奖");
    }

    // 接收后台传来的文字,即中奖或者未中奖的文字
    public void setScratchBackground(String txt_win) {
        // TODO Auto-generated method stub
        Paint paint = new Paint();
        Bitmap bitmap = Bitmap.createBitmap(screenWidth, screenHeight,
                Config.ARGB_8888);
        paint.setTextSize(40);
        paint.setColor(Color.BLACK);
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);

        Canvas canvas = new Canvas(bitmap);
        canvas.drawColor(Color.alpha(0));
        canvas.drawText(txt_win, screenWidth / 2, 60, paint);
        setBackgroundDrawable(new BitmapDrawable(getResources(), bitmap));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        mCanvas.drawPath(mPath, mPaint);
        canvas.drawBitmap(bitmap, 0, 0, null);
    }

    int x = 0;
    int y = 0;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        int action = event.getAction();
        int currX = (int) event.getX();
        int currY = (int) event.getY();
        switch (action)
        {
        case MotionEvent.ACTION_DOWN:
        {
            mPath.reset();
            x = currX;
            y = currY;
            mPath.moveTo(x, y);
        }
            break;
        case MotionEvent.ACTION_MOVE:
        {
            mPath.quadTo(x, y, currX, currY);
            x = currX;
            y = currY;
            postInvalidate();
        }
            break;
        case MotionEvent.ACTION_UP:
        {
            new Thread(mRunnable).start();
        }
        case MotionEvent.ACTION_CANCEL:
        {
            mPath.reset();
        }
            break;
        }
        return true;
    }

    private Runnable mRunnable = new Runnable()
    {
        private int[] mPixels;

        @Override
        public void run() {
            float wipeArea = 0;
            float totalArea = screenWidth * screenHeight;
            Bitmap mBitmap = bitmap;
            mPixels = new int[screenWidth * screenHeight];
            /**
             * 拿到所有的像素信息
             */
            mBitmap.getPixels(mPixels, 0, screenWidth, 0, 0, screenWidth,
                    screenHeight);
            /**
             * 遍历统计擦除的区域
             */
            for (int i = 0; i < screenWidth; i++)
            {
                for (int j = 0; j < screenHeight; j++)
                {
                    int index = i + j * screenWidth;
                    if (mPixels[index] == 0)
                    {
                        wipeArea++;
                    }
                }
            }

            /**
             * 根据所占百分比,进行一些操作
             */
            if (wipeArea > 0 && totalArea > 0)
            {
                int percent = (int) (wipeArea * 100 / totalArea);
                /**
                 * 设置达到多少百分比的时候,弹窗提醒是否中奖此处设置为20
                 */
                if (percent > 20)
                {
                    /**
                     * 刮开奖以后的操作,此处在子线程toast,可能会发生线程阻塞,只为测试使用
                     */
                    Looper.prepare();
                    Toast.makeText(getContext(), "已刮开" + percent + "%",
                            Toast.LENGTH_LONG).show();
                    Looper.loop();
                }
            }
        }
    };
}

发的是公司需要的效果,以上代码只是一个实现,各种样式还需要自己去实现。

10
1
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:【张鸿洋的博客】很久以前也过一个html5的刮刮卡效...
  • lmj623565791
  • lmj623565791
  • 2014-10-27 09:33
  • 43207

unity3d UGUI教程之-UGUI 实现刮刮卡橡皮擦

有个朋友问我怎么在Unity中使用 UGUI 实现刮刮卡功能,之前确实没有做过,但我想了下,应该使用 Shader 可以达到。于是花了点时间实现了下改功能。看下最终效果图 下面说下实现方式。...
  • andyhebear
  • andyhebear
  • 2016-01-07 17:57
  • 1809

iOS 实现刮刮乐效果demo剑客篇(欢迎提建议和分享经验)

#import "AppDelegate.h" #import "FeelHapplyVC.h" @interface AppDelegate () @end ...
  • u012113447
  • u012113447
  • 2014-12-15 10:03
  • 1649

HTML5实现类似刮刮卡的功能

HTML5实现类似刮刮卡的功能实现,提供素材等!
  • rzg813
  • rzg813
  • 2014-09-10 15:14
  • 26868

HTML5实现刮刮卡功能

HTML5实现类似刮刮卡的功能有这样一个功能,当我们使用微信公众号,发送图片时......此处省略300字!注意要点设置:1.设置用户缩放:user-scalable=no|yes[java] vie...
  • it_man
  • it_man
  • 2014-11-17 13:14
  • 2136

实现刮刮卡功能

  • 2014-10-22 17:14
  • 5KB
  • 下载

Android--百度地图定位功能的具体实现<百度地图SDK版本 v3.7.3>

Android--百度地图定位功能的具体实现
  • xinychan
  • xinychan
  • 2016-05-19 16:55
  • 689

jFinal写的登录功能的具体实现

jFinal框架来实现一个登录功能。仔细看看就懂。
  • qq_36073929
  • qq_36073929
  • 2016-11-14 10:15
  • 1959

iOS App主题皮肤切换功能简介和具体实现详解 附有源码

1. 主题皮肤功能切换介绍 主题切换就是根据用户设置不同的主题,来动态改变用户的界面,通常会改变 navigationBar背景图片、 tabBar背景图片、 tabBar中的按钮的图片和选中的背景图...
  • vbirdbest
  • vbirdbest
  • 2016-01-28 15:35
  • 6568

Android之十三刮刮卡中奖功能

Android之十三刮刮卡中奖功能 package com.zhy.view; import android.content.Context; import android.gra...
  • zhupengqq
  • zhupengqq
  • 2016-05-09 14:03
  • 235
    个人资料
    • 访问:250131次
    • 积分:2874
    • 等级:
    • 排名:第14230名
    • 原创:44篇
    • 转载:0篇
    • 译文:0篇
    • 评论:321条
    QQ交流群

    Android路上

    611566797
    博客专栏
    我的公众号