Android自定義View——從零開始實現書籍翻頁效果（四）

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。
系列教程：Android開發之從零開始系列
源碼：github.com/AnliaLee/BookPage，歡迎star

大家要是看到有錯誤的地方或者有啥好的建議，歡迎留言評論

前言：本期是從零開始實現 書籍翻頁效果原理篇的最後一期，我們要把剩下的 翻頁陰影補全（後續優化會以番外篇的形式不定期更新）。繪製陰影效果的方案非常多，貼近現實的光影效果需要大家一點點慢慢調試。這裏給出我個人的方案以及原理解析，供大家參考

本篇只着重於思路和實現步驟，裏面用到的一些知識原理不會非常細地拿來講，如果有不清楚的api或方法可以在網上搜下相應的資料，肯定有大神講得非常清楚的，我這就不獻醜了。本着認真負責的精神我會把相關知識的博文鏈接也貼出來（其實就是懶不想寫那麼多哈哈），大家可以自行傳送。爲了照顧第一次閱讀系列博客的小夥伴，本篇會出現一些在之前系列博客就講過的內容，看過的童鞋自行跳過該段即可

國際慣例，先上效果圖

目錄

劃分陰影區域

繪製下一頁（B區域）的陰影

繪製當前頁背面（C區域）的陰影

繪製當前頁（A區域）的陰影

劃分陰影區域

我們先來簡單回顧一下各標誌點位置以及區域的劃分（詳情請見Android自定義View——從零開始實現書籍翻頁效果（一））。各標識點位置如下

當我們進行翻頁操作時，View分爲三個區域，分別是A區域（當前頁），B區域（下一頁），C區域（當前頁背面），如下圖所示

那麼以這三個區域的劃分爲基準，陰影落在哪個區域就屬於哪個區域的陰影，共分爲A左陰影區域、A右陰影區域、B陰影區域、C陰影區域，具體陰影劃分如下圖所示

我們從最簡單的B區域陰影開始，分析繪製陰影效果的原理

繪製下一頁（B區域）的陰影

按需求，當f點位於右下角時，陰影區域是從直線cj出發，垂直於cj向右下角方向繪製一段距離，距離隨af的距離增大而增大，且顏色由深到淺線性漸變。利用GradientDrawable方面的知識我們可以繪製出一個顏色線性漸變的矩形，但是GradientDrawable的setBounds方法只能設置一個各邊與XY軸平行或垂直的矩形，因此我們還需要用canvas.rotate方法旋轉畫布的座標軸，使得繪製出來的陰影矩形一邊（深色出發的那一邊）與cj重合，具體實現如下圖所示（渣畫工湊合着看吧┑(￣Д ￣)┍）

圖中左下方的矩形就是我們的陰影矩形，其中短邊長度爲af長度的四分之一（可根據需求調整），長邊長度爲整個View的對角線長度（因爲cj不可能超過此長度），顏色由cc ₁出發，向X軸負方向由深到淺線性漸變。然後以c點爲中心旋轉角c ₁cj的角度，使得cc ₁與cj重合，即可繪製出我們想要的陰影區域。那角c ₁cj的角度怎麼求呢？由圖我們可以知道cc ₁是逆時針旋轉的，且因爲cj與eh平行，所以角jcf與角hef相等，即角c ₁cj = 90° + 角hef。我們結合Math.toDegrees和Math.atan2方法計算這個角度，因爲是逆時針旋轉，所以旋轉角度是負的，則h、e、f三點在角度計算座標軸的位置如下圖所示

則旋轉角度公式爲

float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));

同理，當f點在右上角時也是這樣計算，區別在於陰影矩形的left和right因旋轉角度少了90°會有所不同，具體旋轉過程大家可以自己畫圖分析。原理分析完畢，開始敲代碼。修改BookPageView，增加繪製B區域陰影的方法

/**
 * 繪製B區域內容
 * @param canvas
 * @param pathPaint
 * @param pathA
 */
private void drawPathBContent(Canvas canvas, Path pathA, Paint pathPaint){
    Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
    Canvas contentCanvas = new Canvas(contentBitmap);

    //下面開始繪製區域內的內容...
    contentCanvas.drawPath(getPathB(),pathPaint);
    contentCanvas.drawText("這是在B區域的內容...BBBB", viewWidth-260, viewHeight-100, textPaint);

    //結束繪製區域內的內容...

    canvas.save();
    canvas.clipPath(pathA);//裁剪出A區域
    canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C區域的全集
    canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B區域中不同於與AC區域的部分
    canvas.drawBitmap(contentBitmap, 0, 0, null);

    //爲了更好地觀察在不裁剪時陰影區域的範圍，重置一下畫布
    canvas.restore();
    canvas.save();

    drawPathBShadow(canvas);//調用陰影繪製方法
    canvas.restore();
}

/**
 * 繪製B區域陰影，陰影左深右淺
 * @param canvas
 */
private void drawPathBShadow(Canvas canvas){
    int deepColor = 0xff111111;//爲了讓效果更明顯使用此顏色代碼，具體可根據實際情況調整
//        int deepColor = 0x55111111;
    int lightColor = 0x00111111;
    int[] gradientColors = new int[] {deepColor,lightColor};//漸變顏色數組

    int deepOffset = 0;//深色端的偏移值
    int lightOffset = 0;//淺色端的偏移值
    float aTof =(float) Math.hypot((a.x - f.x),(a.y - f.y));//a到f的距離
    float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//對角線長度

    int left;
    int right;
    int top = (int) c.y;
    int bottom = (int) (viewDiagonalLength + c.y);
    GradientDrawable gradientDrawable;
    if(style.equals(STYLE_TOP_RIGHT)){//f點在右上角
        //從左向右線性漸變
        gradientDrawable =new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);//線性漸變

        left = (int) (c.x - deepOffset);//c點位於左上角
        right = (int) (c.x + aTof/4 + lightOffset);
    }else {
        //從右向左線性漸變
        gradientDrawable =new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT,gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        left = (int) (c.x - aTof/4 - lightOffset);//c點位於左下角
        right = (int) (c.x + deepOffset);
    }
    gradientDrawable.setBounds(left,top,right,bottom);//設置陰影矩形

    float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));//旋轉角度
    canvas.rotate(rotateDegrees, c.x, c.y);//以c爲中心點旋轉
    gradientDrawable.draw(canvas);
}

不裁剪陰影區域的效果如圖

註釋掉我們試驗用的代碼

/**
 * 繪製B區域內容
 * @param canvas
 * @param pathPaint
 * @param pathA
 */
private void drawPathBContent(Canvas canvas, Path pathA, Paint pathPaint){
    Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
    Canvas contentCanvas = new Canvas(contentBitmap);

    //下面開始繪製區域內的內容...
    contentCanvas.drawPath(getPathB(),pathPaint);
    contentCanvas.drawText("這是在B區域的內容...BBBB", viewWidth-260, viewHeight-100, textPaint);

    //結束繪製區域內的內容...

    canvas.save();
    canvas.clipPath(pathA);//裁剪出A區域
    canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C區域的全集
    canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B區域中不同於與AC區域的部分
    canvas.drawBitmap(contentBitmap, 0, 0, null);

//        canvas.restore();
//        canvas.save();

    drawPathBShadow(canvas);
    canvas.restore();
}

最終效果如下

繪製當前頁背面（C區域）的陰影

由之前這張圖可以看出來C區域陰影的繪製過程其實是和B區域差不多的，不同的地方在於顏色由深到淺的漸變方向變成垂直cj向a點方向，且陰影矩形的短邊長度變爲與ce或jh（取短的那個）長度相關，因爲原理一樣，就不再贅述了，下面是繪製C區域陰影的代碼（注意對比分析不同於繪製B區域陰影方法的地方）

/**
 * 繪製C區域內容
 * @param canvas
 * @param pathA
 * @param pathPaint
 */
private void drawPathCContent(Canvas canvas, Path pathA, Paint pathPaint){
    Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
    Canvas contentCanvas = new Canvas(contentBitmap);

    //下面開始繪製區域內的內容...
    contentCanvas.drawPath(getPathB(),pathPaint);//繪製一個背景，path用B的就行
    contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);

    //結束繪製區域內的內容...

    canvas.save();
    canvas.clipPath(pathA);
    canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C區域不同於A區域的部分

    float eh = (float) Math.hypot(f.x - e.x,h.y - f.y);
    float sin0 = (f.x - e.x) / eh;
    float cos0 = (h.y - f.y) / eh;
    //設置翻轉和旋轉矩陣
    float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f };
    mMatrixArray[0] = -(1-2 * sin0 * sin0);
    mMatrixArray[1] = 2 * sin0 * cos0;
    mMatrixArray[3] = 2 * sin0 * cos0;
    mMatrixArray[4] = 1 - 2 * sin0 * sin0;

    Matrix mMatrix = new Matrix();
    mMatrix.reset();
    mMatrix.setValues(mMatrixArray);//翻轉和旋轉
    mMatrix.preTranslate(-e.x, -e.y);//沿當前XY軸負方向位移得到 矩形A₃B₃C₃D₃
    mMatrix.postTranslate(e.x, e.y);//沿原XY軸方向位移得到 矩形A4 B4 C4 D4
    canvas.drawBitmap(contentBitmap, mMatrix, null);

    drawPathCShadow(canvas);//調用繪製陰影方法
    canvas.restore();
}

/**
 * 繪製C區域陰影，陰影左淺右深
 * @param canvas
 */
private void drawPathCShadow(Canvas canvas){
    int deepColor = 0xff111111;//爲了讓效果更明顯使用此顏色代碼，具體可根據實際情況調整
//        int deepColor = 0x55333333;
    int lightColor = 0x00333333;
    int[] gradientColors = {lightColor,deepColor};//漸變顏色數組

    int deepOffset = 1;//深色端的偏移值
    int lightOffset = -30;//淺色端的偏移值
    float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
    int midpoint_ce = (int) (c.x + e.x) / 2;//ce中點
    int midpoint_jh = (int) (j.y + h.y) / 2;//jh中點
    float minDisToControlPoint = Math.min(Math.abs(midpoint_ce - e.x), Math.abs(midpoint_jh - h.y));//中點到控制點的最小值

    int left;
    int right;
    int top = (int) c.y;
    int bottom = (int) (viewDiagonalLength + c.y);
    GradientDrawable gradientDrawable;
    if (style.equals(STYLE_TOP_RIGHT)) {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        left = (int) (c.x - lightOffset);
        right = (int) (c.x + minDisToControlPoint + deepOffset);
    } else {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        left = (int) (c.x - minDisToControlPoint - deepOffset);
        right = (int) (c.x + lightOffset);
    }
    gradientDrawable.setBounds(left,top,right,bottom);

    float mDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));
    canvas.rotate(mDegrees, c.x, c.y);
    gradientDrawable.draw(canvas);
}

效果如圖

繪製當前頁（A區域）的陰影

當從右上或右下翻頁時，A區域的陰影由兩部分組成，這在之前的圖中已經標出來了。根據陰影效果的需求，方案不同，繪製的複雜度也不同，這裏就以我自己的方案爲例進行講解

先來看左邊部分的陰影區域，按照之前繪製陰影過程的分析，我們直接代入相關條件即可。此時陰影矩形短邊長度爲d點到直線ae的距離的二分之一，旋轉中心爲e，旋轉角度爲Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y))，根據條件，修改BookPageView

public class BookPageView extends View {
    //省略部分代碼...
    float lPathAShadowDis = 0;//A區域左陰影矩形短邊長度參考值

    /**
     * 繪製A區域內容
     * @param canvas
     * @param pathA
     * @param pathPaint
     */
    private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
        Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
        Canvas contentCanvas = new Canvas(contentBitmap);

        //下面開始繪製區域內的內容...
        contentCanvas.drawPath(pathA,pathPaint);
        contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);

        //結束繪製區域內的內容...

        canvas.save();
        canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
        canvas.drawBitmap(contentBitmap, 0, 0, null);

        drawPathALeftShadow(canvas,pathA);
        canvas.restore();
    }

    /**
     * 繪製A區域左陰影
     * @param canvas
     */
    private void drawPathALeftShadow(Canvas canvas, Path pathA){
        canvas.restore();
        canvas.save();

        int deepColor = 0x33333333;
        int lightColor = 0x01333333;
        int[] gradientColors = {lightColor,deepColor};//漸變顏色數組

        int left;
        int right;
        int top = (int) e.y;
        int bottom = (int) (e.y+viewHeight);

        GradientDrawable gradientDrawable;
        if (style.equals(STYLE_TOP_RIGHT)) {
            gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
            gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

            left = (int) (e.x - lPathAShadowDis /2);
            right = (int) (e.x);
        } else {
            gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
            gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

            left = (int) (e.x);
            right = (int) (e.x + lPathAShadowDis /2);
        }
        gradientDrawable.setBounds(left,top,right,bottom);

        float mDegrees = (float) Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y));
        canvas.rotate(mDegrees, e.x, e.y);
        gradientDrawable.draw(canvas);
    }

    /**
     * 計算各點座標
     * @param a
     * @param f
     */
    private void calcPointsXY(MyPoint a, MyPoint f){
        //省略部分代碼...
        //計算d點到直線ae的距離
        float lA = a.y-e.y;
        float lB = e.x-a.x;
        float lC = a.x*e.y-e.x*a.y;
        lPathAShadowDis = Math.abs((lA*d.x+lB*d.y+lC)/(float) Math.hypot(lA,lB));
    }
}

效果如圖

同理，右邊陰影的繪製也是這樣代入相應條件：陰影矩形短邊長度爲i點到直線ah的距離的二分之一，旋轉中心爲h，旋轉角度爲Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x))，根據條件修改BookPageView

public class BookPageView extends View {
    //省略部分代碼...
    float rPathAShadowDis = 0;//A區域右陰影矩形短邊長度參考值
    /**
     * 繪製A區域內容
     * @param canvas
     * @param pathA
     * @param pathPaint
     */
    private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
        Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
        Canvas contentCanvas = new Canvas(contentBitmap);

        //下面開始繪製區域內的內容...
        contentCanvas.drawPath(pathA,pathPaint);
        contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);

        //結束繪製區域內的內容...

        canvas.save();
        canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
        canvas.drawBitmap(contentBitmap, 0, 0, null);

        drawPathALeftShadow(canvas,pathA);
        drawPathARightShadow(canvas,pathA);
        canvas.restore();
    }

    /**
     * 繪製A區域右陰影
     * @param canvas
     */
    private void drawPathARightShadow(Canvas canvas, Path pathA){
        canvas.restore();
        canvas.save();

        int deepColor = 0x33333333;
        int lightColor = 0x01333333;
        int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色數組

        float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
        int left = (int) h.x;
        int right = (int) (h.x + viewDiagonalLength*10);//需要足夠長的長度
        int top;
        int bottom;

        GradientDrawable gradientDrawable;
        if (style.equals(STYLE_TOP_RIGHT)) {
            gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
            gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

            top = (int) (h.y- rPathAShadowDis /2);
            bottom = (int) h.y;
        } else {
            gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
            gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

            top = (int) h.y;
            bottom = (int) (h.y+ rPathAShadowDis /2);
        }
        gradientDrawable.setBounds(left,top,right,bottom);

        float mDegrees = (float) Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x));
        canvas.rotate(mDegrees, h.x, h.y);
        gradientDrawable.draw(canvas);
    }

    /**
     * 計算各點座標
     * @param a
     * @param f
     */
    private void calcPointsXY(MyPoint a, MyPoint f){
        //省略部分代碼...
        //計算i點到ah的距離
        float rA = a.y-h.y;
        float rB = h.x-a.x;
        float rC = a.x*h.y-h.x*a.y;
        rPathAShadowDis = Math.abs((rA*i.x+rB*i.y+rC)/(float) Math.hypot(rA,rB));
    }
}

效果如圖

最後裁剪出我們要的區域即可（裁剪區域見代碼），修改BookPageView

/**
 * 繪製A區域左陰影
 * @param canvas
 */
private void drawPathALeftShadow(Canvas canvas, Path pathA){
    canvas.restore();
    canvas.save();

    int deepColor = 0x33333333;
    int lightColor = 0x01333333;
    int[] gradientColors = {lightColor,deepColor};//漸變顏色數組

    int left;
    int right;
    int top = (int) e.y;
    int bottom = (int) (e.y+viewHeight);

    GradientDrawable gradientDrawable;
    if (style.equals(STYLE_TOP_RIGHT)) {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        left = (int) (e.x - lPathAShadowDis /2);
        right = (int) (e.x);
    } else {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        left = (int) (e.x);
        right = (int) (e.x + lPathAShadowDis /2);
    }

    //裁剪出我們需要的區域
    Path mPath = new Path();
    mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
    mPath.lineTo(d.x,d.y);
    mPath.lineTo(e.x,e.y);
    mPath.lineTo(a.x,a.y);
    mPath.close();
    canvas.clipPath(pathA);
    canvas.clipPath(mPath, Region.Op.INTERSECT);

    float mDegrees = (float) Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y));
    canvas.rotate(mDegrees, e.x, e.y);

    gradientDrawable.setBounds(left,top,right,bottom);
    gradientDrawable.draw(canvas);
}

/**
 * 繪製A區域右陰影
 * @param canvas
 */
private void drawPathARightShadow(Canvas canvas, Path pathA){
    canvas.restore();
    canvas.save();

    int deepColor = 0x33333333;
    int lightColor = 0x01333333;
    int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色數組

    float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
    int left = (int) h.x;
    int right = (int) (h.x + viewDiagonalLength*10);//需要足夠長的長度
    int top;
    int bottom;

    GradientDrawable gradientDrawable;
    if (style.equals(STYLE_TOP_RIGHT)) {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        top = (int) (h.y- rPathAShadowDis /2);
        bottom = (int) h.y;
    } else {
        gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
        gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

        top = (int) h.y;
        bottom = (int) (h.y+ rPathAShadowDis /2);
    }
    gradientDrawable.setBounds(left,top,right,bottom);

    //裁剪出我們需要的區域
    Path mPath = new Path();
    mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
//        mPath.lineTo(i.x,i.y);
    mPath.lineTo(h.x,h.y);
    mPath.lineTo(a.x,a.y);
    mPath.close();
    canvas.clipPath(pathA);
    canvas.clipPath(mPath, Region.Op.INTERSECT);

    float mDegrees = (float) Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x));
    canvas.rotate(mDegrees, h.x, h.y);
    gradientDrawable.draw(canvas);
}

效果如圖

最後是水平翻頁的陰影，此陰影屬於A區域右陰影的特殊情況，其繪製條件爲：陰影矩形短邊長度爲i點到直線ah的距離的二分之一（最大不超過30，最大值可按需求調整），旋轉中心爲a，旋轉角度爲Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y))，根據條件修改BookPageView

/**
 * 繪製A區域內容
 * @param canvas
 * @param pathA
 * @param pathPaint
 */
private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
    Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
    Canvas contentCanvas = new Canvas(contentBitmap);

    //下面開始繪製區域內的內容...
    contentCanvas.drawPath(pathA,pathPaint);
    contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);

    //結束繪製區域內的內容...

    canvas.save();
    canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
    canvas.drawBitmap(contentBitmap, 0, 0, null);

    if(style.equals(STYLE_LEFT) || style.equals(STYLE_RIGHT)){//左右水平翻頁
        drawPathAHorizontalShadow(canvas,pathA);
    }else {//上下翻頁
        drawPathALeftShadow(canvas,pathA);
        drawPathARightShadow(canvas,pathA);
    }
    canvas.restore();
}

/**
 * 繪製A區域水平翻頁陰影
 * @param canvas
 */
private void drawPathAHorizontalShadow(Canvas canvas, Path pathA){
    canvas.restore();
    canvas.save();

    int deepColor = 0x44333333;
    int lightColor = 0x01333333;
    int[] gradientColors = {lightColor,deepColor};//漸變顏色數組

    GradientDrawable gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
    gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

    int maxShadowWidth = 30;//陰影矩形最大的寬度
    int left = (int) (a.x - Math.min(maxShadowWidth,(rPathAShadowDis/2)));
    int right = (int) (a.x);
    int top = 0;
    int bottom = viewHeight;
    gradientDrawable.setBounds(left,top,right,bottom);

    canvas.clipPath(pathA, Region.Op.INTERSECT);

    float mDegrees = (float) Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y));
    canvas.rotate(mDegrees, a.x, a.y);
    gradientDrawable.draw(canvas);
}

效果如圖

最後調整一下顏色，看下最終效果圖

至此本篇教程到此結束，翻頁效果各部分我們已經一一拆解進行了分析和實現。“房子”建好了，接下來自然是要“裝修房子”，在下期我們將對這個View進行性能優化 (～￣▽￣)～。如果大家看了感覺還不錯麻煩點個贊，你們的支持是我最大的動力~

Android自定義View——從零開始實現書籍翻頁效果（四）

目錄

劃分陰影區域

繪製下一頁（B區域）的陰影

繪製當前頁背面（C區域）的陰影

繪製當前頁（A區域）的陰影

redis的key亂碼問題和值自增問題

CORS error 但是 status code 是200 OK

一個開源且全面的C#算法實戰教程

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

壓縮上傳的GPU數據的方案

使用skopeo同步鏡像

Android學習筆記——從零開始的鬧鐘開發（一）

Android自定義View——從零開始實現書籍翻頁效果（三）

Android知識總結——Path常用方法解析

Android 網絡編程：Retrofit源碼解析

Cocos Creator Tiledmap——入門知識整理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結