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;  //内层图层Paintprivate Paint mOuterPaint;  //外层图层Paintprivate Bitmap mGuaBitmap;  //用于处理刮奖的Bitmapprivate Bitmap mOuterBitmap;  //外层图层Bitmapprivate 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";}@Overrideprotected 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  //Pathpublic 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;}@Overrideprotected 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);}
}

效果图如下：