效果如下：
呱呱卡开奖前
呱呱卡开奖后
实现思路
网上有使用Xfermode来实现刮刮卡，这里提供另一种思路简洁的实现
一张呱呱卡有三层，最底层我用一个TextView控件显示中奖内容，中间层是刮完之后的显示图样，最上面一层是刮刮卡的封面。手指刮除封面的过程就是把刮刮卡最上面一层裁剪的过程。
涉及的知识点
- canvas.clipPath(),Path类，Region.Op类
- onDraw方法和onTouchEvent方法的配合
核心代码如下：
public class LotteryView extends View {
public static final int STROKE_WIDTH = 15;
private float mEventX;
private float mEventY;
/**
* 呱呱卡封面 画笔
*/
private Paint mOverlayPaint;
private RectF mRectBorder;
/**
* 呱呱卡边缘 画笔
*/
private Paint mStrokePaint;
private RectF mRectFill;
private Path mClipPath;
public LotteryView(Context context) {
this(context,null,0);
}
public LotteryView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LotteryView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
Bitmap lotteryOverlay = BitmapFactory.decodeResource(getResources(), R.drawable.icon_lottery_overlay);
mOverlayPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mOverlayPaint.setShader(new BitmapShader(lotteryOverlay, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));
mStrokePaint = new Paint();
mStrokePaint.setAntiAlias(true);
mStrokePaint.setStyle(Paint.Style.STROKE);
mStrokePaint.setColor(Color.BLACK);
mStrokePaint.setStrokeWidth(STROKE_WIDTH);
mClipPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
if (mRectBorder == null) {
mRectBorder = new RectF(0, 0, getWidth(), getHeight());
}
if (mRectFill == null) {
mRectFill = new RectF(0, 0, getWidth(), getHeight());
}
canvas.drawRoundRect(mRectBorder, 10, 10, mStrokePaint);
if (mEventX != 0 || mEventY != 0) {
mClipPath.addCircle(mEventX, mEventY, 50, Path.Direction.CW);
canvas.clipPath(mClipPath, Region.Op.DIFFERENCE);
}
canvas.drawRect(mRectFill, mOverlayPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE:
mEventX = event.getX();
mEventY = event.getY();
invalidate();
break;
}
return true;
}
}
布局里的使用
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp"
>
<TextView
android:id="@+id/tv_lottery_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="20sp"
android:background="@android:color/darker_gray"
android:text="恭喜您，荣获2016年年度最佳程序员"
/>
<com.sugary.roundimageview.LotteryView
android:layout_width="match_parent"
android:layout_height="120dp"
/>
</RelativeLayout>
小结
- 刮刮卡的中奖内容是放在TextView控件，作为最底层显示。
- 如果项目里需要有刮卡完成后回调，可以计算刮除的面积与刮刮卡总面积的比例，超过一定值，即认为呱卡完成。
- 后续的优化方向可以是，把底层的TextView放到LotteryView自定义控件里
