版權聲明：本文為博主原創(chuàng)文章衷旅，未經(jīng)博主允許不得轉載暇检。
系列教程：Android開發(fā)之從零開始系列
源碼：github.com/AnliaLee/BookPage探越，歡迎star大家要是看到有錯誤的地方或者有啥好的建議雁比，歡迎留言評論
前言：本期是從零開始實現(xiàn) 書籍翻頁效果原理篇的最后一期蔚袍，我們要把剩下的 翻頁陰影補全（后續(xù)優(yōu)化會以番外篇的形式不定期更新）坷襟。繪制陰影效果的方案非常多奸柬，貼近現(xiàn)實的光影效果需要大家一點點慢慢調(diào)試。這里給出我個人的方案以及原理解析婴程，供大家參考
本篇只著重于思路和實現(xiàn)步驟廓奕，里面用到的一些知識原理不會非常細地拿來講，如果有不清楚的api或方法可以在網(wǎng)上搜下相應的資料档叔，肯定有大神講得非常清楚的桌粉，我這就不獻丑了。本著認真負責的精神我會把相關知識的博文鏈接也貼出來（其實就是懶不想寫那么多哈哈）衙四，大家可以自行傳送铃肯。為了照顧第一次閱讀系列博客的小伙伴，本篇會出現(xiàn)一些在之前系列博客就講過的內(nèi)容传蹈，看過的童鞋自行跳過該段即可
國際慣例押逼，先上效果圖
目錄
- 劃分陰影區(qū)域
- 繪制下一頁（B區(qū)域）的陰影
- 繪制當前頁背面（C區(qū)域）的陰影
- 繪制當前頁（A區(qū)域）的陰影
劃分陰影區(qū)域
我們先來簡單回顧一下各標志點位置以及區(qū)域的劃分（詳情請見Android自定義View——從零開始實現(xiàn)書籍翻頁效果（一））。各標識點位置如下
當我們進行翻頁操作時卡睦，View分為三個區(qū)域宴胧，分別是A區(qū)域（當前頁），B區(qū)域（下一頁）表锻，C區(qū)域（當前頁背面）恕齐，如下圖所示
那么以這三個區(qū)域的劃分為基準，陰影落在哪個區(qū)域就屬于哪個區(qū)域的陰影，共分為A左陰影區(qū)域显歧、A右陰影區(qū)域仪或、B陰影區(qū)域、C陰影區(qū)域士骤，具體陰影劃分如下圖所示
我們從最簡單的B區(qū)域陰影開始范删，分析繪制陰影效果的原理
繪制下一頁（B區(qū)域）的陰影
按需求，當f點位于右下角時拷肌，陰影區(qū)域是從直線cj出發(fā)到旦，垂直于cj向右下角方向繪制一段距離，距離隨af的距離增大而增大巨缘，且顏色由深到淺線性漸變添忘。利用GradientDrawable方面的知識我們可以繪制出一個顏色線性漸變的矩形，但是GradientDrawable的setBounds方法只能設置一個各邊與XY軸平行或垂直的矩形若锁，因此我們還需要用canvas.rotate方法旋轉畫布的坐標軸搁骑，使得繪制出來的陰影矩形一邊（深色出發(fā)的那一邊）與cj重合，具體實現(xiàn)如下圖所示（渣畫工湊合著看吧┑(￣Д ￣)┍）
圖中左下方的矩形就是我們的陰影矩形又固，其中短邊長度為af長度的四分之一（可根據(jù)需求調(diào)整）仲器，長邊長度為整個View的對角線長度（因為cj不可能超過此長度），顏色由cc ?出發(fā)仰冠，向X軸負方向由深到淺線性漸變乏冀。然后以c點為中心旋轉角c ?cj的角度，使得cc ?與cj重合洋只，即可繪制出我們想要的陰影區(qū)域煤辨。那角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點在右上角時也是這樣計算谨履，區(qū)別在于陰影矩形的left和right因旋轉角度少了90°會有所不同，具體旋轉過程大家可以自己畫圖分析熬丧。原理分析完畢笋粟，開始敲代碼。修改BookPageView，增加繪制B區(qū)域陰影的方法
/**
* 繪制B區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(getPathB(),pathPaint);
contentCanvas.drawText("這是在B區(qū)域的內(nèi)容...BBBB", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA);//裁剪出A區(qū)域
canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C區(qū)域的全集
canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B區(qū)域中不同于與AC區(qū)域的部分
canvas.drawBitmap(contentBitmap, 0, 0, null);
//為了更好地觀察在不裁剪時陰影區(qū)域的范圍害捕，重置一下畫布
canvas.restore();
canvas.save();
drawPathBShadow(canvas);//調(diào)用陰影繪制方法
canvas.restore();
}
/**
* 繪制B區(qū)域陰影绿淋，陰影左深右淺
* @param canvas
*/
private void drawPathBShadow(Canvas canvas){
int deepColor = 0xff111111;//為了讓效果更明顯使用此顏色代碼，具體可根據(jù)實際情況調(diào)整
// int deepColor = 0x55111111;
int lightColor = 0x00111111;
int[] gradientColors = new int[] {deepColor,lightColor};//漸變顏色數(shù)組
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);
}
不裁剪陰影區(qū)域的效果如圖
注釋掉我們試驗用的代碼
/**
* 繪制B區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(getPathB(),pathPaint);
contentCanvas.drawText("這是在B區(qū)域的內(nèi)容...BBBB", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA);//裁剪出A區(qū)域
canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C區(qū)域的全集
canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B區(qū)域中不同于與AC區(qū)域的部分
canvas.drawBitmap(contentBitmap, 0, 0, null);
// canvas.restore();
// canvas.save();
drawPathBShadow(canvas);
canvas.restore();
}
最終效果如下
繪制當前頁背面（C區(qū)域）的陰影
由之前這張圖可以看出來C區(qū)域陰影的繪制過程其實是和B區(qū)域差不多的尝盼，不同的地方在于顏色由深到淺的漸變方向變成垂直cj向a點方向吞滞，且陰影矩形的短邊長度變?yōu)榕cce或jh（取短的那個）長度相關，因為原理一樣盾沫，就不再贅述了裁赠，下面是繪制C區(qū)域陰影的代碼（注意對比分析不同于繪制B區(qū)域陰影方法的地方）
/**
* 繪制C區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(getPathB(),pathPaint);//繪制一個背景，path用B的就行
contentCanvas.drawText("這是在A區(qū)域的內(nèi)容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C區(qū)域不同于A區(qū)域的部分
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);//調(diào)用繪制陰影方法
canvas.restore();
}
/**
* 繪制C區(qū)域陰影赴精，陰影左淺右深
* @param canvas
*/
private void drawPathCShadow(Canvas canvas){
int deepColor = 0xff111111;//為了讓效果更明顯使用此顏色代碼组贺，具體可根據(jù)實際情況調(diào)整
// int deepColor = 0x55333333;
int lightColor = 0x00333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色數(shù)組
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區(qū)域）的陰影
當從右上或右下翻頁時，A區(qū)域的陰影由兩部分組成祖娘，這在之前的圖中已經(jīng)標出來了。根據(jù)陰影效果的需求啊奄，方案不同渐苏，繪制的復雜度也不同，這里就以我自己的方案為例進行講解
先來看左邊部分的陰影區(qū)域菇夸，按照之前繪制陰影過程的分析琼富，我們直接代入相關條件即可。此時陰影矩形短邊長度為d點到直線ae的距離的二分之一庄新，旋轉中心為e鞠眉，旋轉角度為Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y))，根據(jù)條件择诈，修改BookPageView
public class BookPageView extends View {
//省略部分代碼...
float lPathAShadowDis = 0;//A區(qū)域左陰影矩形短邊長度參考值
/**
* 繪制A區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區(qū)域的內(nèi)容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪制內(nèi)容進行裁剪械蹋，取和A區(qū)域的交集
canvas.drawBitmap(contentBitmap, 0, 0, null);
drawPathALeftShadow(canvas,pathA);
canvas.restore();
}
/**
* 繪制A區(qū)域左陰影
* @param canvas
*/
private void drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色數(shù)組
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))，根據(jù)條件修改BookPageView
public class BookPageView extends View {
//省略部分代碼...
float rPathAShadowDis = 0;//A區(qū)域右陰影矩形短邊長度參考值
/**
* 繪制A區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區(qū)域的內(nèi)容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪制內(nèi)容進行裁剪荷科，取和A區(qū)域的交集
canvas.drawBitmap(contentBitmap, 0, 0, null);
drawPathALeftShadow(canvas,pathA);
drawPathARightShadow(canvas,pathA);
canvas.restore();
}
/**
* 繪制A區(qū)域右陰影
* @param canvas
*/
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色數(shù)組
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));
}
}
效果如圖
最后裁剪出我們要的區(qū)域即可（裁剪區(qū)域見代碼）唯咬，修改BookPageView
/**
* 繪制A區(qū)域左陰影
* @param canvas
*/
private void drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色數(shù)組
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);
}
//裁剪出我們需要的區(qū)域
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區(qū)域右陰影
* @param canvas
*/
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色數(shù)組
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);
//裁剪出我們需要的區(qū)域
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區(qū)域右陰影的特殊情況畏浆，其繪制條件為：陰影矩形短邊長度為i點到直線ah的距離的二分之一（最大不超過30胆胰，最大值可按需求調(diào)整），旋轉中心為a刻获，旋轉角度為Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y))蜀涨，根據(jù)條件修改BookPageView
/**
* 繪制A區(qū)域內(nèi)容
* @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);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區(qū)域的內(nèi)容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪制區(qū)域內(nèi)的內(nèi)容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪制內(nèi)容進行裁剪，取和A區(qū)域的交集
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區(qū)域水平翻頁陰影
* @param canvas
*/
private void drawPathAHorizontalShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x44333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色數(shù)組
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);
}
效果如圖
最后調(diào)整一下顏色，看下最終效果圖
至此本篇教程到此結束勉盅，翻頁效果各部分我們已經(jīng)一一拆解進行了分析和實現(xiàn)佑颇。“房子”建好了草娜，接下來自然是要“裝修房子”挑胸，在下期我們將對這個View進行性能優(yōu)化 (～￣▽￣)～。如果大家看了感覺還不錯麻煩點個贊宰闰，你們的支持是我最大的動力~
