Android開發(fā)之自定義刮刮卡實現(xiàn)

關于刮刮卡的實現(xiàn)效果不需要做太多解釋，特別是在電商APP中，每當做活動的時候都會有它的身影存在，趁著美好周末，來實現(xiàn)下這個效果，也算是對零碎知識點的一個整合。

刮刮卡實現(xiàn)效果
刮刮卡實現(xiàn)效果.gif

所涉及的知識點：

1、自定義View的一些流程
2、雙緩沖繪圖機制
3、Paint的繪圖模式
4、觸摸事件的一些流程
5、Bitmap的相關知識

實現(xiàn)思路：

其實非常簡單，首先我們需要確定所要繪圖的區(qū)域，然后對這塊區(qū)域進行多層的繪圖（背景層，前景層），然后去監(jiān)聽觸摸事件，把手指觸摸的區(qū)域的前景層給消除即可。

首先我們先來實現(xiàn)一個簡單版的：
步驟：
1、繪制圖片作為背景層
2、繪制一張和背景層大小一致的灰色圖層作為前景層
3、監(jiān)聽手指的觸摸區(qū)域，把對應區(qū)域的前景層消除

1、首先繪制圖片作為背景層，這個太簡單了，我們把資源文件轉成Bitmap對象，然后利用onDraw(Canvas canvas)里的Canvas畫出來即可。

//背景圖
mBackGroundBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background);

    @Override
    protected void onDraw(Canvas canvas) {
        //繪制背景層
        canvas.drawBitmap(mBackGroundBitmap, 0, 0, null);
    }

2、再來繪制一張和背景層大小一致的灰色圖層作為前景層，這里我們需要用到繪圖的雙緩沖機制（這里的緩沖區(qū)指Bitmap對象）。
雙緩沖機制：先將要繪制的圖形以對象的形式存放在內(nèi)存中，作為繪制緩沖區(qū)，然后在這個對象上進行一系列的操作，然后再將其繪制到屏幕，避免過多的操作使得在繪制的過程中出現(xiàn)屏幕閃爍現(xiàn)象。

        //背景圖
        mBackGroundBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background);
        //創(chuàng)建一個和背景圖大小一致的Bitmap對象作為裝載畫布
        mForeGroundBitmap = Bitmap.createBitmap(mBackGroundBitmap.getWidth(), mBackGroundBitmap.getHeight(), Config.ARGB_8888);
        //與Canvas進行綁定
        mCanvas = new Canvas(mForeGroundBitmap);
        //涂成灰色
        mCanvas.drawColor(Color.GRAY);

    @Override
    protected void onDraw(Canvas canvas) {
        //繪制背景層
        canvas.drawBitmap(mBackGroundBitmap, 0, 0, null);
        //繪制前景層
        canvas.drawBitmap(mForeGroundBitmap, 0, 0, null);
    }

運行此時的代碼，你會發(fā)現(xiàn)背景層已經(jīng)和前景層融為一體（其實是2個圖層，類似于PS里的圖層疊加）
3、監(jiān)聽手指的觸摸區(qū)域，把對應區(qū)域的前景層消除，這里我們需要用到一個技巧，在Paint畫筆API中給我們提供了一個PorterDuffXfermode，它有點想數(shù)學里的交并集，是用來控制兩個圖像之間的混合顯示模式。


來自Graphics下的XferModes

在這里它會先去繪制DST層再繪制SRC層，那么對應著下來就是背景層（DST）和前景層（SRC），那么在這個圖像我們怎么去選擇模式呢？
這里我們需要取的是背景層的內(nèi)容，也就是DST和 SRC的交集，然后內(nèi)容區(qū)域顯示DST，那么也就是DstIn模式，來看下關于畫筆Paint的設置。

        mPaint = new Paint();
        mPaint.setAlpha(0);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeWidth(80);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

然后我們重寫onTouchEvent在手指按下屏幕和滑動屏幕的時候利用Path去記錄我們想要擦除的路徑即可。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastX = (int) event.getX();
                mLastY = (int) event.getY();
                mPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                mLastX = (int) event.getX();
                mLastY = (int) event.getY();
                mPath.lineTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                break;
        }

        mCanvas.drawPath(mPath, mPaint);
        invalidate();

        return true;
    }

接下來我們來實現(xiàn)一個完整版的刮刮卡：
步驟：
1、繪制中獎信息作為背景層
2、繪制一張和中獎信息同等大小的刮獎封面作為前景層
3、監(jiān)聽手指的觸摸區(qū)域，把對應區(qū)域的前景層消除
4、在消除大部分區(qū)域的時候，講中獎信息完整展示
步驟1、2、3和前面大體一致，這里我就不詳細說了，來講一下需要注意的幾個點：
1、在繪制中獎信息（文本）的時候，如何確定繪制的位置：

關于文字位置的確定

首先我們需要知道任何的控件在Android的布局中外層都是一個矩形的，A代表刮刮卡繪制區(qū)域，B代表中獎信息繪制區(qū)域，所以在這里我們繪制文本信息的起始點應該是A布局寬的一半減去B布局寬的一半，同理，高也應該是A布局高的一半減去B布局高的一半，這里我們把B布局，也就是文字控件的大小信息用一個Rect對象來存儲，而這里的A布局即為Bitmap背景圖的大小。

        //文字畫筆
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setTextSize(30);
        mTextPaint.getTextBounds(mText, 0, mText.length(), mRect);

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText(mText, mBitmap.getWidth() / 2 - mRect.width() / 2, mBitmap.getHeight() / 2 + mRect.height() / 2, mTextPaint);
    }

這樣我們就繪制好了背景層的中獎信息，再來就是前景層，和上面一樣我們利用資源文件轉Bitmap對象然后綁定Canvas并繪制上刮刮卡圖案

       //通過資源文件創(chuàng)建Bitmap對象
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background);
        //新建同等大小的Bitmap對象
        mForeBitmap = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        //雙緩沖,裝載畫布
        mForeCanvas = new Canvas(mForeBitmap);
        mForeCanvas.drawBitmap(mBitmap, 0, 0, null);

剩下的利用Path來記錄用戶手指觸摸路徑就是一樣的了，這里我們額外來添加一個功能，使得當用戶在刮刮卡上刮的區(qū)域范圍超過50%后，自動消除刮刮卡前景層。
我們通過Bitmap的getPixels方法就可以拿到Bitmap的像素信息，由于這里涉及到了計算，這是個耗時操作，所以這里我們開啟一個子線程來執(zhí)行任務

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

        @Override
        public void run() {

            int w = mForeBitmap.getWidth();
            int h = mForeBitmap.getHeight();

            float wipeArea = 0;
            float totalArea = w * h;


            pixels = new int[w * h];
            /**
             * pixels      接收位圖顏色值的數(shù)組
             * offset      寫入到pixels[]中的第一個像素索引值
             * stride      pixels[]中的行間距個數(shù)值(必須大于等于位圖寬度)?？梢詾樨摂?shù)
             * x          　從位圖中讀取的第一個像素的x坐標值。
             * y           從位圖中讀取的第一個像素的y坐標值
             * width    　　從每一行中讀取的像素寬度
             * height 　　　讀取的行數(shù)
             */
            mForeBitmap.getPixels(pixels, 0, w, 0, 0, w, h);

            for (int i = 0; i < w; i++) {
                for (int j = 0; j < h; j++) {
                    int index = i + j * w;
                    if (pixels[index] == 0) {
                        wipeArea++;
                    }
                }
            }


            if (wipeArea > 0 && totalArea > 0) {
                int percent = (int) (wipeArea * 100 / totalArea);
                if (percent > 50) {
                    isClear = true;
                    postInvalidate();
                }
            }

        }
    };

首先我們聲明一個數(shù)組來記錄像素點信息，數(shù)組的大小即為像素總數(shù)的大小也就是Bitmap的寬高，然后我們在onTouchEvent里的ACTION_UP中去計算被擦除的像素值，這里的for循環(huán)可能有的朋友會看的有點懵，沒著急，我畫一張圖，你就能懂。

Bitmap像素點

我們第一層for循環(huán)i指的是Bitmap的寬，第二次層for循環(huán)j指的是Bitmap的高，那么index=i+jw，假設這個Bitmap的像素大小是3*3，那么index的值就是0，3，6，1，4，7，2，5，8，是不是有感覺了？我們遍歷像素點是按照縱向下來的，當pixels的值為0的時候，證明已經(jīng)是被用戶擦除掉的像素點。
當被擦除的區(qū)域超出50%，我們就在onDraw里去控制不讓canvas繪制前景圖即可。

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText(mText, mForeBitmap.getWidth() / 2 - mRect.width() / 2, mForeBitmap.getHeight() / 2 + mRect.height() / 2, mTextPaint);
        if (!isClear) {
            canvas.drawBitmap(mForeBitmap, 0, 0, null);
        }
    }

下面貼一下完整版的代碼：

package com.lcw.view;

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.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 刮刮卡(完善版)
 * Create by: chenwei.li
 * Date: 2017/7/22
 * Time: 下午7:25
 * Email: lichenwei.me@foxmail.com
 */

public class ScratchCardView2 extends View {

    //處理文字
    private String mText = "恭喜您中獎啦!!";
    private Paint mTextPaint;
    private Rect mRect;

    //處理圖層
    private Paint mForePaint;
    private Path mPath;

    private Bitmap mBitmap;//加載資源文件
    private Canvas mForeCanvas;//前景圖Canvas
    private Bitmap mForeBitmap;//前景圖Bitmap

    //記錄位置
    private int mLastX;
    private int mLastY;

    private volatile boolean isClear;//標志是否被清除


    public ScratchCardView2(Context context) {
        this(context, null);
    }

    public ScratchCardView2(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScratchCardView2(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {

        mRect = new Rect();
        mPath = new Path();

        //文字畫筆
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setTextSize(30);
        mTextPaint.getTextBounds(mText, 0, mText.length(), mRect);

        //擦除畫筆
        mForePaint = new Paint();
        mForePaint.setAntiAlias(true);
        mForePaint.setAlpha(0);
        mForePaint.setStrokeCap(Paint.Cap.ROUND);
        mForePaint.setStrokeJoin(Paint.Join.ROUND);
        mForePaint.setStyle(Paint.Style.STROKE);
        mForePaint.setStrokeWidth(30);
        mForePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        //通過資源文件創(chuàng)建Bitmap對象
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.background);
        mForeBitmap = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        //雙緩沖,裝載畫布
        mForeCanvas = new Canvas(mForeBitmap);
        mForeCanvas.drawBitmap(mBitmap, 0, 0, null);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText(mText, mForeBitmap.getWidth() / 2 - mRect.width() / 2, mForeBitmap.getHeight() / 2 + mRect.height() / 2, mTextPaint);
        if (!isClear) {
            canvas.drawBitmap(mForeBitmap, 0, 0, null);
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastX = (int) event.getX();
                mLastY = (int) event.getY();
                mPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                mLastX = (int) event.getX();
                mLastY = (int) event.getY();
                mPath.lineTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_UP:
                new Thread(mRunnable).start();
                break;
            default:
                break;
        }

        mForeCanvas.drawPath(mPath, mForePaint);
        invalidate();
        return true;
    }


    /**
     * 開啟子線程計算被擦除的像素點
     */
    private Runnable mRunnable = new Runnable() {
        int[] pixels;

        @Override
        public void run() {

            int w = mForeBitmap.getWidth();
            int h = mForeBitmap.getHeight();

            float wipeArea = 0;
            float totalArea = w * h;


            pixels = new int[w * h];
            /**
             * pixels      接收位圖顏色值的數(shù)組
             * offset      寫入到pixels[]中的第一個像素索引值
             * stride      pixels[]中的行間距個數(shù)值(必須大于等于位圖寬度)?？梢詾樨摂?shù)
             * x          　從位圖中讀取的第一個像素的x坐標值。
             * y           從位圖中讀取的第一個像素的y坐標值
             * width    　　從每一行中讀取的像素寬度
             * height 　　　讀取的行數(shù)
             */
            mForeBitmap.getPixels(pixels, 0, w, 0, 0, w, h);

            for (int i = 0; i < w; i++) {
                for (int j = 0; j < h; j++) {
                    int index = i + j * w;
                    if (pixels[index] == 0) {
                        wipeArea++;
                    }
                }
            }


            if (wipeArea > 0 && totalArea > 0) {
                int percent = (int) (wipeArea * 100 / totalArea);
                if (percent > 50) {
                    isClear = true;
                    postInvalidate();
                }
            }

        }
    };
}

源碼下載:

這里附上源碼地址（歡迎Star，歡迎Fork）：源碼下載

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容