版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
系列教程：Android開發(fā)之從零開始系列
源碼：github.com/AnliaLee/BookPage，歡迎star大家要是看到有錯誤的地方或者有啥好的建議，歡迎留言評論
前言：前幾期博客中我們分析了 書籍翻頁效果各部分的繪制原理，雖然效果都實現(xiàn)了，但測試過程中卻發(fā)現(xiàn)我們的View翻起頁來似乎 不是很流暢，這期便帶大家一起對View進(jìn)行 性能優(yōu)化
本篇只著重于思路和實現(xiàn)步驟，里面用到的一些知識原理不會非常細(xì)地拿來講，如果有不清楚的api或方法可以在網(wǎng)上搜下相應(yīng)的資料，肯定有大神講得非常清楚的，我這就不獻(xiàn)丑了。本著認(rèn)真負(fù)責(zé)的精神我會把相關(guān)知識的博文鏈接也貼出來（其實就是懶不想寫那么多哈哈），大家可以自行傳送。為了照顧第一次閱讀系列博客的小伙伴，本篇會出現(xiàn)一些在之前系列博客就講過的內(nèi)容，看過的童鞋自行跳過該段即可
國際慣例，先上效果圖
目錄
- 封裝View觸摸事件
- 各區(qū)域顯示內(nèi)容繪制優(yōu)化（重用內(nèi)容Bitmap）
- 當(dāng)前頁背面（C區(qū)域）背景繪制優(yōu)化
封裝View觸摸事件
在進(jìn)行性能優(yōu)化之前，首先感謝@布隆提出的建議：BookPageView作為一個完整的書頁自定義View，那么對觸摸事件的管理建議放在View的onTouchEvent中，而不是在外部setOnTouchListener，這樣保證了View功能的完整性也提高了使用上的方便性。那么按照這樣的要求，修改BookPageView
public class BookPageView extends View {
//省略部分代碼...
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
float x = event.getX();
float y = event.getY();
if(x<=viewWidth/3){//左
style = STYLE_LEFT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && y<=viewHeight/3){//上
style = STYLE_TOP_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth*2/3 && y>viewHeight/3 && y<=viewHeight*2/3){//右
style = STYLE_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && y>viewHeight*2/3){//下
style = STYLE_LOWER_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && x<viewWidth*2/3 && y>viewHeight/3 && y<viewHeight*2/3){//中
style = STYLE_MIDDLE;
}
break;
case MotionEvent.ACTION_MOVE:
setTouchPoint(event.getX(),event.getY(),style);
break;
case MotionEvent.ACTION_UP:
startCancelAnim();
break;
}
return true;
}
}
修改之后我們在Activity中不再需要調(diào)用setOnTouchListener了，在xml樣式文件中也不再需要設(shè)置android:clickable="true"屬性
各區(qū)域顯示內(nèi)容繪制優(yōu)化（重用內(nèi)容Bitmap）
相關(guān)博文鏈接
之前完成所有效果的繪制后，在手機(jī)上測試了下，發(fā)現(xiàn)翻頁不是很流暢，感覺卡卡的，遂打開手機(jī)的GPU呈現(xiàn)模式分析，重新試下翻頁，然后。。。
Σ( ° △ °|||)︴尼瑪手機(jī)這是要炸了么，趕緊翻代碼找原因。一番檢查后，發(fā)現(xiàn)View每次在執(zhí)行觸摸翻頁操作時，都新建了A、B、C區(qū)域內(nèi)容Bitmap，造成了不必要的開銷，實際上如果各區(qū)域顯示內(nèi)容不變的情況下，內(nèi)容Bitmap只需要初始化一次，以后每次繪制時僅需要重用原來的Bitmap即可。同理，View中能重用的對象就要盡量重用，修改我們的BookPageView
public class BookPageView extends View {
//省略部分代碼...
private float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f };
private Matrix mMatrix;
private GradientDrawable drawableLeftTopRight;
private GradientDrawable drawableLeftLowerRight;
private GradientDrawable drawableRightTopRight;
private GradientDrawable drawableRightLowerRight;
private GradientDrawable drawableHorizontalLowerRight;
private GradientDrawable drawableBTopRight;
private GradientDrawable drawableBLowerRight;
private GradientDrawable drawableCTopRight;
private GradientDrawable drawableCLowerRight;
private Bitmap pathAContentBitmap;//A區(qū)域內(nèi)容Bitmap
private Bitmap pathBContentBitmap;//B區(qū)域內(nèi)容Bitmap
private Bitmap pathCContentBitmap;//C區(qū)域內(nèi)容Bitmap
private void init(Context context, @Nullable AttributeSet attrs){
//省略部分代碼...
mMatrix = new Matrix();
createGradientDrawable();
}
private void drawPathAContentBitmap(Bitmap bitmap,Paint pathPaint){
Canvas mCanvas = new Canvas(bitmap);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
mCanvas.drawPath(getPathDefault(),pathPaint);
mCanvas.drawText("這是在A區(qū)域的內(nèi)容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結(jié)束繪制區(qū)域內(nèi)的內(nèi)容...
}
private void drawPathBContentBitmap(Bitmap bitmap,Paint pathPaint){
Canvas mCanvas = new Canvas(bitmap);
//下面開始繪制區(qū)域內(nèi)的內(nèi)容...
mCanvas.drawPath(getPathDefault(),pathPaint);
mCanvas.drawText("這是在B區(qū)域的內(nèi)容...BBBB", viewWidth-260, viewHeight-100, textPaint);
//結(jié)束繪制區(qū)域內(nèi)的內(nèi)容...
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = measureSize(defaultHeight, heightMeasureSpec);
int width = measureSize(defaultWidth, widthMeasureSpec);
setMeasuredDimension(width, height);
viewWidth = width;
viewHeight = height;
a.x = -1;
a.y = -1;
pathAContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathAContentBitmap(pathAContentBitmap,pathAPaint);
pathBContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathBContentBitmap(pathBContentBitmap,pathBPaint);
pathCContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathAContentBitmap(pathCContentBitmap,pathCPaint);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(a.x==-1 && a.y==-1){
drawPathAContent(canvas,getPathDefault());
}else {
if(f.x==viewWidth && f.y==0){
drawPathAContent(canvas,getPathAFromTopRight());
drawPathCContent(canvas,getPathAFromTopRight());
drawPathBContent(canvas,getPathAFromTopRight());
}else if(f.x==viewWidth && f.y==viewHeight){
drawPathAContent(canvas,getPathAFromLowerRight());
drawPathCContent(canvas,getPathAFromLowerRight());
drawPathBContent(canvas,getPathAFromLowerRight());
}
}
}
/**
* 初始化各區(qū)域陰影GradientDrawable
*/
private void createGradientDrawable(){
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = new int[]{lightColor,deepColor};//漸變顏色數(shù)組
drawableLeftTopRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
drawableLeftTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableLeftLowerRight = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
drawableLeftLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x22333333;
lightColor = 0x01333333;
gradientColors = new int[]{deepColor,lightColor,lightColor};
drawableRightTopRight = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
drawableRightTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableRightLowerRight = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
drawableRightLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x44333333;
lightColor = 0x01333333;
gradientColors = new int[]{lightColor,deepColor};//漸變顏色數(shù)組
drawableHorizontalLowerRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);;
drawableHorizontalLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x55111111;
lightColor = 0x00111111;
gradientColors = new int[] {deepColor,lightColor};//漸變顏色數(shù)組
drawableBTopRight =new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,gradientColors);
drawableBTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);//線性漸變
drawableBLowerRight =new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT,gradientColors);
drawableBLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x55333333;
lightColor = 0x00333333;
gradientColors = new int[]{lightColor,deepColor};//漸變顏色數(shù)組
drawableCTopRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
drawableCTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableCLowerRight = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
drawableCLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
}
/**
* 繪制A區(qū)域內(nèi)容
* @param canvas
* @param pathA
*/
private void drawPathAContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪制內(nèi)容進(jìn)行裁剪，取和A區(qū)域的交集
canvas.drawBitmap(pathAContentBitmap, 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 drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int left;
int right;
int top = (int) e.y;
int bottom = (int) (e.y+viewHeight);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = drawableLeftTopRight;
left = (int) (e.x - lPathAShadowDis /2);
right = (int) (e.x);
} else {
gradientDrawable = drawableLeftLowerRight;
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區(qū)域右陰影
* @param canvas
*/
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
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 = drawableRightTopRight;
top = (int) (h.y- rPathAShadowDis /2);
bottom = (int) h.y;
} else {
gradientDrawable = drawableRightLowerRight;
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區(qū)域水平翻頁陰影
* @param canvas
*/
private void drawPathAHorizontalShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);
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 gradientDrawable = drawableHorizontalLowerRight;
gradientDrawable.setBounds(left,top,right,bottom);
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);
}
/**
* 繪制B區(qū)域內(nèi)容
* @param canvas
* @param pathA
*/
private void drawPathBContent(Canvas canvas, Path pathA){
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(pathBContentBitmap, 0, 0, null);
drawPathBShadow(canvas);
canvas.restore();
}
/**
* 繪制B區(qū)域陰影，陰影左深右淺
* @param canvas
*/
private void drawPathBShadow(Canvas canvas){
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 = drawableBTopRight;
left = (int) (c.x - deepOffset);//c點位于左上角
right = (int) (c.x + aTof/4 + lightOffset);
}else {
//從右向左線性漸變
gradientDrawable = drawableBLowerRight;
left = (int) (c.x - aTof/4 - lightOffset);//c點位于左下角
right = (int) (c.x + deepOffset);
}
gradientDrawable.setBounds(left,top,right,bottom);//設(shè)置陰影矩形
float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));//旋轉(zhuǎn)角度
canvas.rotate(rotateDegrees, c.x, c.y);//以c為中心點旋轉(zhuǎn)
gradientDrawable.draw(canvas);
}
/**
* 繪制C區(qū)域內(nèi)容
* @param canvas
* @param pathA
*/
private void drawPathCContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C區(qū)域不同于A區(qū)域的部分
canvas.drawPath(getPathC(),pathCPaint);//繪制背景色
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;
//設(shè)置翻轉(zhuǎn)和旋轉(zhuǎn)矩陣
mMatrixArray[0] = -(1-2 * sin0 * sin0);
mMatrixArray[1] = 2 * sin0 * cos0;
mMatrixArray[3] = 2 * sin0 * cos0;
mMatrixArray[4] = 1 - 2 * sin0 * sin0;
mMatrix.reset();
mMatrix.setValues(mMatrixArray);//翻轉(zhuǎn)和旋轉(zhuǎn)
mMatrix.preTranslate(-e.x, -e.y);//沿當(dāng)前XY軸負(fù)方向位移得到 矩形A?B?C?D?
mMatrix.postTranslate(e.x, e.y);//沿原XY軸方向位移得到 矩形A4 B4 C4 D4
canvas.drawBitmap(pathCContentBitmap, mMatrix, null);
drawPathCShadow(canvas);
canvas.restore();
}
/**
* 繪制C區(qū)域陰影，陰影左淺右深
* @param canvas
*/
private void drawPathCShadow(Canvas canvas){
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 = drawableCTopRight;
left = (int) (c.x - lightOffset);
right = (int) (c.x + minDisToControlPoint + deepOffset);
} else {
gradientDrawable = drawableCLowerRight;
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);
}
}
修改后重新測試，卡頓的問題得到了明顯改善（開了手機(jī)錄屏對性能會有點影響），如圖
當(dāng)前頁背面（C區(qū)域）背景繪制優(yōu)化
相關(guān)博文鏈接
Android 常用的性能分析工具詳解：GPU呈現(xiàn)模式, TraceView, Systrace, HirearchyViewer
Android View 繪制流程(Draw) 完全解析
Android應(yīng)用程序UI硬件加速渲染的Display List構(gòu)建過程分析
Android應(yīng)用程序UI硬件加速渲染的Display List渲染過程分析
經(jīng)過優(yōu)化重用Bitmap后，測試中又發(fā)現(xiàn)了新的問題，當(dāng)觸摸點向左下角方向移動到一定距離時，會發(fā)現(xiàn)卡頓現(xiàn)象越來越明顯，超過一定的臨界值后，卡頓現(xiàn)象又突然消失了，如下圖所示
通過一番調(diào)試后，發(fā)現(xiàn)是這句代碼導(dǎo)致的繪制卡頓（紅框處）
那么為什么我們繪制那么多陰影沒有問題，偏偏是這個drawPath導(dǎo)致了卡頓呢？我們定格繪制卡頓的時刻，觀察Gpu呈現(xiàn)模式分析的條形圖
可以發(fā)現(xiàn)深綠色和紅色線條特別長，其中深綠色線條表示主線程（Main Thread）執(zhí)行任務(wù)的時間，過長意味著主線程執(zhí)行了太多的任務(wù)，導(dǎo)致UI渲染跟不上vSync的信號而出現(xiàn)掉幀的情況；紅色線條則表示Android進(jìn)行2D渲染顯示列表（Display List）的時間。利用Systrace測試工具觀察具體的繪制時間分布，找到繪制卡頓中的一幀
可以發(fā)現(xiàn)Choreographer.doFrame耗時過長，我們利用TraceView測試工具分析Choreographer.doFrame，一層層向下尋找耗時過長的子方法，最后定位到了updateRootDisplayList和nSyncAndDrawFrame方法，如圖所示
這兩個方法的作用是什么呢？我們要從Android繪制View的過程說起，通過網(wǎng)上查閱的資料（相關(guān)資料博文已貼出），簡單總結(jié)一下：在使用GPU進(jìn)行繪制前，需要對繪制的內(nèi)容進(jìn)行渲染，即需要渲染Display List。Display List包含了Android應(yīng)用程序窗口所有的繪制命令，只要對Display List進(jìn)行了渲染，就可以得到整個Android應(yīng)用程序窗口的UI，而Android應(yīng)用程序窗口的UI渲染分為兩步
- 第一步是由應(yīng)用程序進(jìn)程的Main Thread構(gòu)建Display List，即updateRootDisplayList方法，對應(yīng)Gpu呈現(xiàn)模式分析的深綠色線條，其中軟件渲染的子視圖需要先繪制在一個Bitmap上，然后這個Bitmap再記錄在父視圖的Display List中，繪制的視圖內(nèi)容越多，構(gòu)建Display List的耗時越長
- 第二步由應(yīng)用程序進(jìn)程的Render Thread渲染Display List，即nSyncAndDrawFrame方法，對應(yīng)Gpu呈現(xiàn)模式分析的紅色線條，其中執(zhí)行渲染需要得到Main Thread的通知，此通知在Main Thread與Render Thread信息同步完畢后發(fā)出。信息同步過程中，Display List引用到的Bitmap會封裝成Open GL紋理上傳至GPU。當(dāng)全部Open GL紋理上傳完畢，說明引用到的Bitmap全部同步完成。同樣，繪制的視圖內(nèi)容越多，則引用到的Bitmap越大，進(jìn)而導(dǎo)致上傳耗時增加，Render Thread執(zhí)行渲染等待通知的時間也就相應(yīng)變長
分析完繪制過程后，回到Systrace工具的測試圖，可以看到Open GL紋理上傳耗時過長，繪制的Path太大了，如圖紅框區(qū)域
我們之前通過調(diào)試代碼知道“罪魁禍?zhǔn)住笔?strong>canvas.drawPath(getPathC(),pathCPaint)這句代碼，說明是PathC太大了。我們知道PathC是由i、d、b、a、k五個點連線而成，將觸摸點移動到繪制卡頓的區(qū)域，發(fā)現(xiàn)i的Y坐標(biāo)遠(yuǎn)小于0，證明此時PathC的面積非常大，我們的結(jié)論是正確的，如圖
那為什么又會出現(xiàn)觸摸點移動到某個臨界值后卡頓現(xiàn)象突然消失的現(xiàn)象呢？查閱資料后知道，Open GL紋理是有大小限制的，如果超出這個限制，那么就會導(dǎo)至某些Bitmap不能作為Open GL紋理上傳到GPU，利用Systrace工具找到此臨界點，測試結(jié)果見下圖
可以發(fā)現(xiàn)卡頓突然消失的原因確實是Open GL紋理太大導(dǎo)致不能上傳至GPU，所以少了這個上傳的過程繪制速度也就變快了。既然知道了原因，那就動手改代碼吧，改動非常簡單，只需要在繪制A、B、C區(qū)域之前為canvas繪制背景色即可，修改BookPageView
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.YELLOW);//繪制和C區(qū)域顏色相同的背景色
if(a.x==-1 && a.y==-1){
drawPathAContent(canvas,getPathDefault(),pathAPaint);
}else {
if(f.x==viewWidth && f.y==0){
drawPathAContent(canvas,getPathAFromTopRight(),pathAPaint);
drawPathCContent(canvas,getPathAFromTopRight(),pathCContentPaint);
drawPathBContent(canvas,getPathAFromTopRight(),pathBPaint);
}else if(f.x==viewWidth && f.y==viewHeight){
beginTrace("drawPathA");
drawPathAContent(canvas,getPathAFromLowerRight(),pathAPaint);
endTrace();
beginTrace("drawPathC");
drawPathCContent(canvas,getPathAFromLowerRight(),pathCContentPaint);
endTrace();
beginTrace("drawPathB");
drawPathBContent(canvas,getPathAFromLowerRight(),pathBPaint);
endTrace();
}
}
/**
* 繪制C區(qū)域內(nèi)容
* @param canvas
* @param pathA
* @param pathPaint
*/
private void drawPathCContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C區(qū)域不同于A區(qū)域的部分
// canvas.drawPath(getPathC(),pathCPaint);//干掉這個(*￣︿￣)
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;
//設(shè)置翻轉(zhuǎn)和旋轉(zhuǎn)矩陣
mMatrixArray[0] = -(1-2 * sin0 * sin0);
mMatrixArray[1] = 2 * sin0 * cos0;
mMatrixArray[3] = 2 * sin0 * cos0;
mMatrixArray[4] = 1 - 2 * sin0 * sin0;
mMatrix.reset();
mMatrix.setValues(mMatrixArray);//翻轉(zhuǎn)和旋轉(zhuǎn)
mMatrix.preTranslate(-e.x, -e.y);//沿當(dāng)前XY軸負(fù)方向位移得到 矩形A?B?C?D?
mMatrix.postTranslate(e.x, e.y);//沿原XY軸方向位移得到 矩形A4 B4 C4 D4
canvas.drawBitmap(pathCContentBitmap, mMatrix, null);
drawPathCShadow(canvas);
canvas.restore();
}
效果如圖
至此本篇教程到此結(jié)束，書籍翻頁效果的實現(xiàn)也暫時告一段落啦。如果大家看了感覺還不錯麻煩點個贊，你們的支持是我最大的動力~
