电商活动中刮刮卡的实现
一、实现原理
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>
