刮刮卡效果---自定义View

日积月累。

还在学习中，今天学习了一个使用自定义View做的刮刮卡的效果，写篇博客分享一下，写的不好请各位大佬谅解

直接进入主题。

自定义控件嘛还是那一套，先创建一个cardview，继承view，实现构造方法。看代码

public class ScratchCard extends View{

    //画笔
    private Paint paint;
    private Path path;
    //背景图
    private Bitmap bgbitmap;
    //上层的灰色涂层
    private Bitmap fgbitmap;
    private Canvas canvas;

    public ScratchCard(Context context) {
        super(context);
        initPaint();
    }

    public ScratchCard(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public ScratchCard(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void initPaint(){
        paint = new Paint();
        paint.setAlpha(0);
        //显示在背景图层上
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        //绘制的时候遵循paint的设置
        paint.setStyle(Paint.Style.STROKE);
        //手势拐角设置为圆
        paint.setStrokeJoin(Paint.Join.ROUND);
        //手势结束设置为圆
        paint.setStrokeCap(Paint.Cap.ROUND);
        //刮的范围
        paint.setStrokeWidth(20);

        path = new Path();
        //设置底层图片
        bgbitmap = BitmapFactory.decodeResource(getResources(), R.drawable.nan);
        //根据底部图片大小设置上层涂层颜色
        fgbitmap = Bitmap.createBitmap(bgbitmap.getWidth(), bgbitmap.getHeight(), Bitmap.Config.ARGB_8888);
        canvas = new Canvas(fgbitmap);
        canvas.drawColor(Color.parseColor("#999999"));
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制背景图层
        canvas.drawBitmap(bgbitmap,0,0,null);
        //绘制遮罩图层
        canvas.drawBitmap(fgbitmap,0,0,null);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                path.reset();
                path.moveTo(event.getX(),event.getY());
                //实现点击擦除
                path.lineTo(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                //手势画线
                path.lineTo(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                break;

        }
        canvas.drawPath(path,paint);
        invalidate();
        return true;
    }
}

代码中注释写的还算清楚，都是我自己查的，能弄懂都是啥意思。第一次写这个，还不太熟，慢慢学。

效果如下：

图有点小，如果觉得妹纸不好看，你自己可以换一个，想要哪个要哪个。

日积月累