最后是水平翻页的阴影，此阴影属于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进行性能优化 (～￣▽￣)～。如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~