Android 刮刮卡原理

来源：互联网发布：js 拖动方框流程图编辑：程序博客网时间：2024/04/30 03:51

Android 刮刮卡原理

个人做个记录，无意从研发变成了产品，现在回头做做代码，练练生手。

只看刮的原理，很简单。需要知道的核心就1个：Paint.setXfermode。

基本原理：

一共分两层，如下图，上面一层用于刮，下面一层用于显示。演示代码为偷懒的方式用两个控件层叠，实际应该使用自定义控件绘制。
刮奖层在触摸时，使用Paint.setXfermode在刮奖层绘制，达到部分透明的目的。

动手：

1. 布局，就类似上图，两个控件层叠（实际请自行绘制自定义控件，如代码本来应该只有GuaGuaCard）

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".ScrollingActivity">    <TextView        android:layout_width="300dp"        android:layout_height="300dp"        android:gravity="center"        android:text="5000"        android:textSize="100dp" />    <com.mc.wiget.GuaGuaCard        android:layout_width="300dp"        android:layout_height="300dp" /></FrameLayout>

2. 创建刮奖层自定义控件

刮奖层自定义控件的原理是，创建一个灰色的图片绘制到canvas，在触摸事件中不端的使用Path在图片上绘制“擦除区域”，实际是Xfermode的dst_out模式。

1）初始化绘制蒙层的画笔

   /**     * 初始化画笔     */    private void init() {        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); //导致擦除效果的核心        mPaint.setColor(Color.BLACK);        mPaint.setAntiAlias(true);        mPaint.setStrokeWidth(40);        mPaint.setStyle(Paint.Style.STROKE);        mPath = new Path();    }

2）绘制好基本的蒙层

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //测量蒙层大小，并初始化        mFrontGround = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);        //将蒙层绘制到刮奖区域        mFrontCanvas = new Canvas(mFrontGround);        mFrontCanvas.drawColor(Color.BLUE);    }

3）在手指移动时绘制擦除区域

    @Override    public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        float x = 0;        float y = 0;        switch (action) {            //按下时移动擦除的起点到手指落下的坐标            case MotionEvent.ACTION_DOWN: {                x = event.getX();                y = event.getY();                mPath.moveTo(x, y);                break;            }            //移动时绘制直线，即擦除区域            case MotionEvent.ACTION_MOVE:                x = Math.abs(event.getX() - x);                y = Math.abs(event.getY() - y);                mPath.lineTo(x, y);                break;            case MotionEvent.ACTION_UP:            case MotionEvent.ACTION_CANCEL:            default:                break;        }        //绘制        invalidate();        return true;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //在刮奖区域上绘制擦除区域，因为用了xfermode，所以这块会是透明的        mFrontCanvas.drawPath(mPath, mPaint);        //将刮奖区域绘制到控件上展示        canvas.drawBitmap(mFrontGround, 0, 0, null);    }

这样基本就能够把刮奖层搞定，那后面的，要是一时想不清楚，可以尝试源码下载。

1 0