Android項目刮刮獎詳解（一）

前言

最近正在學鴻洋大大的刮刮獎，感受學有所得，即是來寫篇詳解（儘管網上有不少了，不過畢竟是本身寫的，本身之後方便複習），正文開始

目標

實現畫板功能

思路

咱們須要自定義View來實現畫板功能，以後再將其稍微改造便可。
關於自定義View，若是沒有了解的同窗建議先去了解一下，百度自定義View就會有許多相關教程了，
我在這裏也就簡單的提一下，自定義View經常使用的三大類，Paint（畫筆），Path（路徑），
Canvas(畫布)，三大類方法介紹

1. 繼承View，實現構造方法

   四個構造方法，咱們主要實現兩個參數的構造方法便可

   private Paint mOutterPaint = new Paint(); // 繪製線條的Paint,即用戶手指繪製Path
    private Path mPath = new Path();//記錄用戶繪製的Path
    private Canvas mCanvas;//畫布，能夠畫東西
    private Bitmap mBitmap;//畫布在此圖片上畫畫
    private int mLastX;//x座標
    private int mLastY;//y座標
    private Bitmap background;//這個是背景圖，咱們先不理
    public GuaGuaKa(Context context) {
        super(context);
    }
   
    public GuaGuaKa(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPath = new Path();
   
    }
   
    public GuaGuaKa(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
   
    public GuaGuaKa(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

2. 複寫onMeasure方法

   咱們首先得到View的寬高，而後以此的寬高建立一個畫布，同時，對畫筆進行一些設置

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.d(TAG, "onMeasure: 測量");
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        // 初始化bitmap
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//以得到的寬高建立一個32位的bitmap
        mCanvas = new Canvas(mBitmap);//以bitmap建立了一個畫布
        mCanvas.drawColor(Color.GREEN);//設置畫布的顏色爲綠色
        //背景圖,下一節解析此部分代碼，先註釋掉
        /*BitmapDrawable bitmap = (BitmapDrawable) getResources().getDrawable(R.drawable.rewrite6);
        background = bitmap.getBitmap();
        background = Bitmap.createScaledBitmap(background,width,height,true);*/
        // 設置畫筆
        mOutterPaint.setColor(Color.BLUE);
        mOutterPaint.setAntiAlias(true);//使用抗鋸齒功能，會消耗較大資源，繪製圖形速度會變慢
        mOutterPaint.setDither(true);//圖像抖動處理,會使繪製出來的圖片顏色更加平滑和飽滿，圖像更加清晰
        mOutterPaint.setStyle(Paint.Style.STROKE);
        mOutterPaint.setStrokeJoin(Paint.Join.ROUND);//圓角，平滑
        mOutterPaint.setStrokeCap(Paint.Cap.ROUND); //圓角
        mOutterPaint.setStrokeWidth(20); // 設置畫筆寬度
    }

3. 複寫onTouchEvent方法

   咱們在這裏複寫，處理一下用戶的觸摸事件當手指按到屏幕上的時候，Path路徑之中就使用moveto方法，移動到手指當前位置，
   invalidate刷新View，回調onDraw方法，（尚未畫出來）。以後，手指移動，action處因而處於ACTION_MOVE的狀態，Path路徑使用lineto方法（畫直線），同時，將x，y座標進行了更新，invalidate刷新View，回調onDraw方法，canvas經過drawpath使用畫筆將path畫了出來，以後若是用戶沒有擡起手指，則繼續循環ACTION_MOVE中的步驟

   @Override
    public boolean onTouchEvent(MotionEvent event) {
        //當手指按到屏幕上的時候，Path路徑之中就使用moveto方法，移動到手指當前位置，invalidate刷新View,回調onDraw方法,（尚未畫出來）,canvas就將畫筆移動到那個座標
        //以後，手指移動，action是處於ACTION_MOVE的狀態，Path路徑使用lineto方法（畫直線），
        // 同時，將x，y座標進行了更新，invalidate刷新View,回調onDraw方法，canvas經過drawpath使用畫筆將path畫了條出來（畫直線），以後若是用戶沒有擡起手指，則繼續循環ACTION_MOVE中的步驟
   
        int action = event.getAction();
        int x = (int) event.getX();//得到x座標
        int y = (int) event.getY();//得到y座標
        switch (action){
            case MotionEvent.ACTION_DOWN:
                mLastX = x; 
                mLastY = y; 
                mPath.moveTo(mLastX, mLastY);//以後回調onDraw方法canvas將path
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(x, y);//以後回調onDraw方法時canvas畫直線到（x，y）該點
                mLastX = x;//更新x座標
                mLastY = y;//更新y座標
                break;
            default:break;
        }
        invalidate();//刷新View，回調onDraw方法
        Log.d(TAG, "onTouchEvent: invalidate");
        return true;

   }

4. 複寫onDraw方法

   以後咱們複寫onDraw方法，在這裏canvas用畫筆開始畫畫

   @Override
    protected void onDraw(Canvas canvas) {
        Log.d(TAG, "onDraw: 畫");
        //canvas.drawBitmap(background,0,0,null);//下一節解析，這裏先註釋掉
        //mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//下一節解析，註釋掉
        mCanvas.drawPath(mPath, mOutterPaint);//mCanvas是咱們定義的畫布，用戶的每次的手指軌跡都被path記錄下來，以後mcanvas就使用畫筆將用戶的手指軌跡畫了出來
        canvas.drawBitmap(mBitmap, 0,0, null);//將mBitmap畫出來
    }

PS：這裏測試的時候發現mCanvas與canvas的順序能夠換個位置，影響不大

簡單的流程圖

補充 雙緩衝技術

事實上，刮刮卡這個項目用到了雙緩衝技術

雙緩衝即在內存中建立一個與屏幕繪圖區域一致的對象，先將圖形繪製到內存中的這個對象上，再一次性將這個對象上的圖形拷貝到屏幕上，這樣能大大加快繪圖的速度。

咱們定義了一個mBitmap，以後使用這個MBitmap創建了一個畫布，實際上咱們的mCanvas只在mBitmap上畫畫

mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//以得到的寬高建立一個32位的bitmap
    mCanvas = new Canvas(mBitmap);//以bitmap建立了一個畫布
    mCanvas.drawColor(Color.GREEN);

mCanvas負責將用戶的手指痕跡經過drawpath方法畫出來

mCanvas.drawPath(mPath, mOutterPaint);

以後，onDraw方法裏面的canvas則將MBitmap複製並顯示出來

canvas.drawBitmap(mBitmap, 0,0, null);//將mBitmap畫出來（將MBitmap直接複製到View上顯示）