安卓下的刮刮卡摸奖的实现

效果如下：

呱呱卡开奖前

呱呱卡开奖后

实现思路

一张呱呱卡有三层，最底层我用一个TextView控件显示中奖内容，中间层是刮完之后的显示图样，最上面一层是刮刮卡的封面。手指刮除封面的过程就是把刮刮卡最上面一层裁剪的过程。

涉及的知识点

1. canvas.clipPath(),Path类，Region.Op类
2. 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>

小结

1. 刮刮卡的中奖内容是放在TextView控件，作为最底层显示。
2. 如果项目里需要有刮卡完成后回调，可以计算刮除的面积与刮刮卡总面积的比例，超过一定值，即认为呱卡完成。
3. 后续的优化方向可以是，把底层的TextView放到LotteryView自定义控件里

 

来自：http://www.jianshu.com/p/2f17658eed60