效果如下:
呱呱卡开奖前
呱呱卡开奖后
实现思路
一张呱呱卡有三层,最底层我用一个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自定义控件里
来自:http://www.jianshu.com/p/2f17658eed60
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://phpxs.com/post/5542/
- 转载请注明:转载必须在正文中标注并保留原文链接
- 扫码: 扫上方二维码获取免费视频资料
查 看2022高级编程视频教程免费获取