安卓下的刮刮卡摸奖的实现（刮刮卡模拟器）

安卓下的刮刮卡摸奖的实现（刮刮卡模拟器）

效果如下：

呱呱卡开奖前

呱呱卡开奖后

实现思路

一张呱呱卡有三层，最底层我用一个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;

}

}

布局里的使用

android:layout_width="match_parent"

android:layout_height="120dp"

>

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年年度最佳程序员"

/>

android:layout_width="match_parent"

android:layout_height="120dp"

/>

android:layout_width="match_parent"

android:layout_height="120dp"

>

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年年度最佳程序员"

/>

android:layout_width="match_parent"

android:layout_height="120dp"

/>

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年年度最佳程序员"

/>

android:layout_width="match_parent"

android:layout_height="120dp"

/>

android:layout_width="match_parent"

android:layout_height="120dp"

/>

小结

刮刮卡的中奖内容是放在TextView控件，作为最底层显示。

如果项目里需要有刮卡完成后回调，可以计算刮除的面积与刮刮卡总面积的比例，超过一定值，即认为呱卡完成。

后续的优化方向可以是，把底层的TextView放到LotteryView自定义控件里

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。