安卓开发_慕课网_百度地图_刮刮涂层效果

学习内容来自“慕课网”

很多电商APP中都有刮刮卡活动，刮开涂层，获取刮刮卡内部信息

原理图：

刮刮卡效果：通过画笔画笔来实现，黄色涂层，蓝色涂层，刮动则将两涂层共有的部分去掉，   就是DstOut对应的 效果

MainActivity.java

package com.example.gauguaka;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    
}

新建一个包guaguaka.java 在包中新建类Guaguaka.java 

package guaguaka.view;

import com.example.gauguaka.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class Guaguaka extends View{
    //画笔
    private Paint moutterpaint;
    //记录绘制路径
    private Path mpath;
    //画布
    private Canvas mcanvas;
    //图片
    private Bitmap mbitmap;
    //绘制坐标值
    private int mlastx;
    private int mlasty;
    /*----------------------*/
    private Bitmap bitmap;
    private Bitmap moutterbitmap;
    // 判断遮盖层区域是否消除达到阈值
    private volatile boolean mComplete = false;
    
    
    
    public Guaguaka(Context context) {
        // TODO Auto-generated constructor stub
        this(context,null);
    }
    public Guaguaka(Context context, AttributeSet attrs) {
        this(context, attrs,0);
        // TODO Auto-generated constructor stub
    }
    public Guaguaka(Context context, AttributeSet attrs,int defStyle) {
        super(context, attrs ,defStyle);
        // TODO Auto-generated constructor stub
        init();
    }
    //获得控件的宽度和高度
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        // 初始化我们的bitmap
        mbitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        mcanvas = new Canvas(mbitmap);
        // 设置绘制path画笔的一些属性
        setupOutPaint();
        //setUpBackPaint();
        //mcanvas.drawColor(Color.parseColor("#c0c0c0"));
        //设置刮刮卡框架为圆角
        mcanvas.drawRoundRect(new RectF(0, 0, width, height), 30, 30,moutterpaint);
        //显示刮刮卡未刮开是的图案
        mcanvas.drawBitmap(moutterbitmap, null, new Rect(0, 0, width, height),null);
        
        
    }
    //初始化操作
    private void init() {
        // TODO Auto-generated method stub
        moutterpaint = new Paint();
        mpath = new Path();
        //刮开后的图片（chaji_1是一个茶壶的图片）
        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.chaji_1);    
        //刮刮卡未刮时候的图案（fg_guaguaka 是一个刮刮卡字样的图片）
        moutterbitmap = BitmapFactory.decodeResource(getResources(),R.drawable.fg_guaguaka);
        }
    /**
     * 设置绘制path画笔的一些属性
     */
    private void setupOutPaint()
    {
        //画笔颜色 --红色
        moutterpaint.setColor(Color.parseColor("#c0c0c0"));
        //锯齿
        moutterpaint.setAntiAlias(true);
        moutterpaint.setDither(true);
        //线条圆角
        moutterpaint.setStrokeJoin(Paint.Join.ROUND);
        moutterpaint.setStrokeCap(Paint.Cap.ROUND);
        moutterpaint.setStyle(Style.FILL);
        //画笔宽度
        moutterpaint.setStrokeWidth(20);
    }
    /**
     * 设置我们绘制获奖信息的画笔属性
     */
    
    //绘制事件
    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        int action = event.getAction();

        int x = (int) event.getX();
        int y = (int) event.getY();

        switch (action)
        {
        case MotionEvent.ACTION_DOWN://按下

            mlastx = x;
            mlasty = y;
            mpath.moveTo(mlastx, mlasty);
            break;
        case MotionEvent.ACTION_MOVE://移动

            int dx = Math.abs(x - mlastx);
            int dy = Math.abs(y - mlasty);

            if (dx > 3 || dy > 3)
            {
                mpath.lineTo(x, y);
            }
            //更新坐标
            mlastx = x;
            mlasty = y;

            break;
        case MotionEvent.ACTION_UP://抬起
            new Thread(mRunnable).start();// 统计擦除区域任务
            break;
        }
        
            invalidate();
        return true;

    }
    @Override
    protected void onDraw(Canvas canvas)
    {
            canvas.drawBitmap(bitmap, 0 , 0, null);
            //注意任务结束，会把一个mComplete设置为true；当为true时，直接展现刮奖区
            if (!mComplete)
            {
            drawPath();
            canvas.drawBitmap(mbitmap, 0, 0, null);
            }
        }

    private void drawPath()
    {
        moutterpaint.setStyle(Style.STROKE);
        moutterpaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
        mcanvas.drawPath(mpath, moutterpaint);
    }
    /**
     * 统计擦除区域任务
     */
    private Runnable mRunnable = new Runnable()
    {
        private int[] mPixels;

        @Override
        public void run()
        {

            int w = getWidth();
            int h = getHeight();

            float wipeArea = 0;
            float totalArea = w * h;

            Bitmap bitmap = mbitmap;

            mPixels = new int[w * h];

            /**
             * 拿到所有的像素信息
             */
            bitmap.getPixels(mPixels, 0, w, 0, 0, w, h);

            /**
             * 遍历统计擦除的区域
             */
            for (int i = 0; i < w; i++)
            {
                for (int j = 0; j < h; j++)
                {
                    int index = i + j * w;
                    if (mPixels[index] == 0)
                    {
                        wipeArea++;
                    }
                }
            }
            
            /**
             * 根据所占百分比，进行一些操作
             */
            if (wipeArea > 0 && totalArea > 0)
            {
                int percent = (int) (wipeArea * 100 / totalArea);
                Log.e("TAG", percent + "");

                if (percent > 70)
                {
                    mComplete = true;
                    postInvalidate();
                }
            }
        }

    };
}

将布局文件修改：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

 <guaguaka.view.Guaguaka
        android:id="@+id/id_guaguaka"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

效果图：

接下来就行效果的优化。

当刮开涂层达到总面积的多少的时候，将全部图案显示出来

首先定义一个布尔值

// 判断遮盖层区域是否消除达到阈值
    private volatile boolean mComplete = false;

添加计算刮开区域面积的线程

private Runnable mRunnable = new Runnable()
    {
        private int[] mPixels;

        @Override
        public void run()
        {

            int w = getWidth();
            int h = getHeight();

            float wipeArea = 0;
            float totalArea = w * h;

            Bitmap bitmap = mbitmap;

            mPixels = new int[w * h];

            /**
             * 拿到所有的像素信息
             */
            bitmap.getPixels(mPixels, 0, w, 0, 0, w, h);

            /**
             * 遍历统计擦除的区域
             */
            for (int i = 0; i < w; i++)
            {
                for (int j = 0; j < h; j++)
                {
                    int index = i + j * w;
                    if (mPixels[index] == 0)
                    {
                        wipeArea++;
                    }
                }
            }
            
            /**
             * 根据所占百分比，进行一些操作
             */
            if (wipeArea > 0 && totalArea > 0)
            {
                int percent = (int) (wipeArea * 100 / totalArea);
                Log.e("TAG", percent + "");

                if (percent > 70) //如果刮开面积达到70% 则将mComplete布尔值设为true 将全部图案显示出来
                {
                    mComplete = true;
                    postInvalidate();
                }
            }
        }

    };

在ACTION_UP，即松开触屏的时候调用

case MotionEvent.ACTION_UP://抬起
            new Thread(mRunnable).start();// 统计擦除区域任务
            break;

任务结束，会把一个mComplete设置为true；当为true时，直接展现刮奖区

@Override
    protected void onDraw(Canvas canvas)
    {
        drawBackText(canvas);

        if (!isComplete)
        {
            drawPath();
            canvas.drawBitmap(mBitmap, 0, 0, null);
        }

    }

效果图：