center.PNG

就在上图的蓝色点就是现在的原点。
然后在这原点里画圆弧呗，代码如下

//画内圆圈 mCirclePaint.setColor(besselColorText); RectF mCircleRectF=new RectF(-radius,-radius,radius,radius); canvas.drawArc(mCircleRectF,120,300,false,mCirclePaint); //画外圆圈 mCirclePaint.setColor(mBesselCurveColor); canvas.drawArc(mCircleRectF,120,mCircleNum,false,mCirclePaint);

mCircleNum是为了实现动画效果的，这后面会讲，这样圆弧就画完了。效果也是如上图。
2.在中心点再画今天的走的总路程，代码如下：

//画中间的文字 Rect mCenterRect=new Rect(); String tempAllStop=mCenterNum+""; mCenterTextPaint.getTextBounds(tempAllStop,0,tempAllStop.length(),mCenterRect); int halfWidthText=(mCenterRect.right-mCenterRect.left)/2; int halfHeightText=(mCenterRect.bottom-mCenterRect.top)/2; canvas.drawText(tempAllStop,-halfWidthText,halfHeightText,mCenterTextPaint);

基本的实现思路是用Rect在这个类计算出你要画文字的大小，然后在原点画，不过，记得这里的x,y点是在原点的左下，具体详解看这里写链接内容
接这就是画时间和好友平均步数，其实实现原理也是一样的，只不过在上面的高度是

canvas.drawText(tempFriendAverageStep,-halfTopWidthText,-(halfHeightText+marginText),mTextPaint);

是中心总步数高度的一半再加间隔，而下面的是：

canvas.drawText(tempAverageStep,-halfBottomWidthText,mBottomHeightText+halfHeightText+marginText,mTextPaint);

是下面文字总的高度再加上中心总步数高度的一半再加间隔。现在效果如下图：

img1.PNG

接着就是画排名，首先还是套路：

Rect mNumRect=new Rect(); mCenterTextPaint.getTextBounds(ranking,0,ranking.length(),mNumRect); int halfNum=(mNumRect.right-mNumRect.left)/2; mCenterTextPaint.setTextSize(40); canvas.drawText(ranking,-halfNum,radius,mCenterTextPaint);

计算出排名文字的大小，然后在中心原点x轴为排名文字的一半，y轴问为半径画出排名，效果图如下：

img2.PNG

接着就在排名的两端画文字就行了，带代码如下：

String rankingLeft=getContext().getResources().getString(R.string.ranking_left); mTextPaint.getTextBounds(rankingLeft,0,rankingLeft.length(),mNumRect); canvas.drawText(rankingLeft,-halfNum-(mNumRect.right-mNumRect.left)/2-20,radius,mTextPaint); canvas.drawText(getContext().getResources().getString(R.string.ranking_right),halfNum+10,radius,mTextPaint);

思路还是一样，就不说了。此时效果

img3.PNG

画底下柱状图是，首先用canvas.restore();恢复原点到(0,0)的状态，再用canvas.translate(0,heightView*((float)2/3));把原点移动到圆弧的下面，接着又可以继续画,实现思路和前面一样：

//画最近七天和平均运动 mTextPaint.setTextSize(radius/9); canvas.save(); canvas.translate(0,heightView*((float)2/3)); canvas.drawText(getContext().getResources().getString(R.string.nextSevenDay),marginLineChart,0,mTextPaint); Rect mPercentRect=new Rect(); String mPercentText=stringTemplate(R.string.averageStep,averageStep+""); mTextPaint.getTextBounds(mPercentText,0,mPercentText.length(),mPercentRect); canvas.drawText(mPercentText,widthView-marginLineChart-(mPercentRect.right-mPercentRect.left),0,mTextPaint); //画虚线 mDottedLinePath.moveTo(marginLineChart,marginBottomText); mDottedLinePath.lineTo(widthView-marginLineChart,marginBottomText); canvas.drawPath(mDottedLinePath,mDottedLinePaint);

此时效果如下：