这里画了个饼图的变种，具有分割突出效果的饼图(Pie Chart)，就是个切蛋糕效果的饼图，画这种图，其技巧就在于圆心的偏移。

在圆心偏移，半径不变的基础上，效果就出来了。

    上图:

        

     怎么样，效果还是有模有样的吧。

     代码很简单，附上:

      

package com.xcl.chart; /** * Canvas练习 * 自已绘分割突出效果的饼图(Pie Chart) * * author:xiongchuanliang * date:2014-4-12 */ import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.DisplayMetrics; import android.view.View; public class PanelPieChart2 extends View{ private int ScrWidth,ScrHeight; //演示用的百分比例,实际使用中，即为外部传入的比例参数 private final float arrPer[] = new float[]{20f,30f,10f,40f}; //RGB颜色数组 private final int arrColorRgb[][] = { {77, 83, 97}, {148, 159, 181}, {253, 180, 90}, {52, 194, 188}} ; //指定突出哪个块 private final int offsetBlock = 2; public PanelPieChart2(Context context) { super(context); // TODO Auto-generated constructor stub //屏幕信息 DisplayMetrics dm = getResources().getDisplayMetrics(); ScrHeight = dm.heightPixels; ScrWidth = dm.widthPixels; } public void onDraw(Canvas canvas){ //画布背景 canvas.drawColor(Color.WHITE); float cirX = ScrWidth / 2; float cirY = ScrHeight / 3 ; float radius = ScrHeight / 5 ;//150; float arcLeft = cirX - radius; float arcTop = cirY - radius ; float arcRight = cirX + radius ; float arcBottom = cirY + radius ; RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom); //画笔初始化 Paint PaintArc = new Paint(); Paint PaintLabel = new Paint(); PaintLabel.setColor(Color.WHITE); PaintLabel.setTextSize(16); //位置计算类 XChartCalc xcalc = new XChartCalc(); float Percentage = 0.0f; float CurrPer = 0.0f; int i= 0; for(i=0; i<arrPer.length; i++) { //将百分比转换为饼图显示角度 Percentage = 360 * (arrPer[i]/ 100); Percentage = (float)(Math.round(Percentage *100))/100; //分配颜色 PaintArc.setARGB(255,arrColorRgb[i][0], arrColorRgb[i][1], arrColorRgb[i][2]); if( i == offsetBlock) //指定突出哪个块 { //偏移圆心点位置 float newRadius = radius /10; //计算百分比标签 xcalc.CalcArcEndPointXY(cirX, cirY, newRadius , CurrPer + Percentage/2); arcLeft = xcalc.getPosX() - radius; arcTop = xcalc.getPosY() - radius ; arcRight = xcalc.getPosX() + radius ; arcBottom = xcalc.getPosY() + radius ; RectF arcRF1 = new RectF(arcLeft ,arcTop,arcRight,arcBottom); //在饼图中显示所占比例 canvas.drawArc(arcRF1, CurrPer, Percentage, true, PaintArc); //计算百分比标签 xcalc.CalcArcEndPointXY(xcalc.getPosX(), xcalc.getPosY(), radius - radius/2/2, CurrPer + Percentage/2); //标识 canvas.drawText(Float.toString(arrPer[i])+"%",xcalc.getPosX(), xcalc.getPosY() ,PaintLabel); }else{ //在饼图中显示所占比例 canvas.drawArc(arcRF0, CurrPer, Percentage, true, PaintArc); //计算百分比标签 xcalc.CalcArcEndPointXY(cirX, cirY, radius - radius/2/2, CurrPer + Percentage/2); //标识 canvas.drawText(Float.toString(arrPer[i])+"%",xcalc.getPosX(), xcalc.getPosY() ,PaintLabel); } //下次的起始角度 CurrPer += Percentage; } } }    代码中只需注意下，指定要突出哪块，就在哪块上指定下偏移即可。

附上我其它绘制的图链接:

   

     Android Canvas练习(1)画一张报表来玩    

     Android Canvas练习(2)自已绘饼图

     Android Canvas练习(3)自已绘柱形图

     Android Canvas练习(4)自已绘折线图

     Android Canvas练习(5)自已绘面积图(Area Chart)

     Android Canvas练习(7)绘制欧冠八强防守&控制率数据对比图  

     Android Canvas练习(8)自已绘环形图(Dount Chart)

MAIL: xcl_168@aliyun.com

BLOG: