电商活动中刮刮卡的实现

**一、实现原理** Paint.setXferMode(); a、绘制我们的圆形 b、setXferMode(SrcIn) c、绘制矩形（正方形）图片 **二、主要思想：** 将一个view设计成多层：背景层，含中奖信息等； 遮盖层，用于刮奖，使用关联一个Bitmap的Canvas 在该Bitmap上，使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作) 使用paint.setXfermode 来进行消除手势滑动区域 当刮开90%的时候会全部消失。 **三、代码实现** ~~~ public class GuaGuaKa extends View { private Paint mOutterPaint; private Path mPath; private Canvas mCanvas; private Bitmap mBitmap; private int mLastX; private int mLastY; private Bitmap mOutterBitmap; // ------------------------------- // private Bitmap bitmap; private String mText; private Paint mBackPaint; /** * 记录刮奖信息文本的宽和高 */ private Rect mTextBound; private int mTextSize; private int mTextColor; // 判断遮盖层区域是否消除达到阈值 private volatile boolean mComplete = false; /** * 刮刮卡刮完的回调 * * */ public interface OnGuaGuaKaCompleteListener { void complete(); } private OnGuaGuaKaCompleteListener mListener; public void setOnGuaGuaKaCompleteListener( OnGuaGuaKaCompleteListener mListener) { this.mListener = mListener; } public GuaGuaKa(Context context) { this(context, null); } public GuaGuaKa(Context context, AttributeSet attrs) { this(context, attrs, 0); } public GuaGuaKa(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); TypedArray a = null; try { a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.GuaGuaKa, defStyle, 0); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.GuaGuaKa_text: mText = a.getString(attr); break; case R.styleable.GuaGuaKa_textSize: mTextSize = (int) a.getDimension(attr, TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_SP, 22, getResources().getDisplayMetrics())); break; case R.styleable.GuaGuaKa_textColor: mTextColor = a.getColor(attr, 0x000000); break; } } } finally { if (a != null) a.recycle(); } } public void setText(String mText) { this.mText = mText; // 获得当前画笔绘制文本的宽和高 mBackPaint.getTextBounds(mText, 0, mText.length(), mTextBound); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth(); int height = getMeasuredHeight(); // 初始化我们的bitmap mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888); mCanvas = new Canvas(mBitmap); // 设置绘制path画笔的一些属性 setupOutPaint(); setUpBackPaint(); // mCanvas.drawColor(Color.parseColor("#c0c0c0")); mCanvas.drawRoundRect(new RectF(0, 0, width, height), 30, 30, mOutterPaint); mCanvas.drawBitmap(mOutterBitmap, null, new Rect(0, 0, width, height), null); } /** * 设置我们绘制获奖信息的画笔属性 */ private void setUpBackPaint() { mBackPaint.setColor(mTextColor); mBackPaint.setStyle(Style.FILL); mBackPaint.setTextSize(mTextSize); // 获得当前画笔绘制文本的宽和高 mBackPaint.getTextBounds(mText, 0, mText.length(), mTextBound); } /** * 设置绘制path画笔的一些属性 */ private void setupOutPaint() { mOutterPaint.setColor(Color.parseColor("#c0c0c0")); mOutterPaint.setAntiAlias(true); mOutterPaint.setDither(true); mOutterPaint.setStrokeJoin(Paint.Join.ROUND); mOutterPaint.setStrokeCap(Paint.Cap.ROUND); mOutterPaint.setStyle(Style.FILL); mOutterPaint.setStrokeWidth(20); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int x = (int) event.getX(); int y = (int) event.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(mLastX, mLastY); break; case MotionEvent.ACTION_MOVE: int dx = Math.abs(x - mLastX); int dy = Math.abs(y - mLastY); if (dx > 3 || dy > 3) { mPath.lineTo(x, y); } mLastX = x; mLastY = y; break; case MotionEvent.ACTION_UP: if (!mComplete) new Thread(mRunnable).start(); break; } if (!mComplete) invalidate(); return true; } ~~~ ~~~ </pre>我们在ACTION_UP的时候就行计算，首先我们还是给大家灌输下计算的原理，如果大家用心看了，应该知道我们所有的操作基本都在mBitmap，现在我们获得mBItmap上所有的像素点的数据，统计被清除的区域（被清除的像素为0）；最后与我们图片的总像素数做个除法元算，就可以拿到我们清除的百分比了；不过，计算可能会是一个耗时的操作，具体速度跟图片大小有关，所以我们决定使用异步的方式去计算：<pre name="code" class="java"> ~~~ ~~~ private Runnable mRunnable = new Runnable() { @Override public void run() { int w = getWidth(); int h = getHeight(); float wipeArea = 0; float totalArea = w * h; Bitmap bitmap = mBitmap; int[] mPixels = new int[w * h]; // 获得Bitmap上所有的像素信息 bitmap.getPixels(mPixels, 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 (mPixels[index] == 0) { wipeArea++; } } } if (wipeArea > 0 && totalArea > 0) { int percent = (int) (wipeArea * 100 / totalArea); Log.e("TAG", percent + ""); if (percent > 90) { // 清除掉图层区域 mComplete = true; postInvalidate(); } } } }; @Override protected void onDraw(Canvas canvas) { // canvas.drawBitmap(bitmap, 0 , 0, null); canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2, getHeight() / 2 + mTextBound.height() / 2, mBackPaint); if (!mComplete) { drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); } if (mComplete) { if (mListener != null) { mListener.complete(); } } } private void drawPath() { mOutterPaint.setStyle(Style.STROKE); mOutterPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT)); mCanvas.drawPath(mPath, mOutterPaint); } /** * 进行一些初始化操作 */ private void init() { mOutterPaint = new Paint(); mPath = new Path(); mOutterBitmap = BitmapFactory.decodeResource(getResources(), cn.zhilinghui.guaguaka.R.drawable.fg_guaguaka); mText = "谢谢惠顾"; mTextBound = new Rect(); mBackPaint = new Paint(); mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 22, getResources().getDisplayMetrics()); } } ~~~ view的自定义控件： ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:hyman="http://schemas.android.com/apk/res/cn.zhilinghui.guaguaka" android:layout_width="match_parent" android:layout_height="match_parent" > <cn.zhilinghui.guaguaka.view.GuaGuaKa android:id="@+id/id_guaguaka" android:layout_width="300dp" android:layout_height="100dp" android:layout_centerInParent="true" hyman:text="￥500,0000" hyman:textColor="#ff00f0" hyman:textSize="30sp" /> </RelativeLayout> ~~~