从零开始实现书籍翻页效果（四）(3)_H5之家 - 中国HTML5教程资源分享第一站

同理，右边阴影的绘制也是这样代入相应条件：阴影矩形短边长度为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); }

效果如图