Andriod實現刮刮卡的效果

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

如下：