http://blog.csdn.net/xcl168/article/details/23591181

Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

分类：Android 2014-04-13 10:24 746人阅读评论(2) 收藏举报 Android Canvas android画饼图 pie chart

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

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

上图:

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

代码很简单，附上:

[java] view plain copy

packagecom.xcl.chart;
/**
*Canvas练习
*自已绘分割突出效果的饼图(PieChart)
*
*author:xiongchuanliang
*date:2014-4-12
*/
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.RectF;
importandroid.util.DisplayMetrics;
importandroid.view.View;
publicclassPanelPieChart2extendsView{
privateintScrWidth,ScrHeight;
//演示用的百分比例,实际使用中，即为外部传入的比例参数
privatefinalfloatarrPer[]=newfloat[]{20f,30f,10f,40f};
//RGB颜色数组
privatefinalintarrColorRgb[][]={{77,83,97},
{148,159,181},
{253,180,90},
{52,194,188}};
//指定突出哪个块
privatefinalintoffsetBlock=2;
publicPanelPieChart2(Contextcontext){
super(context);
//TODOAuto-generatedconstructorstub
//屏幕信息
DisplayMetricsdm=getResources().getDisplayMetrics();
ScrHeight=dm.heightPixels;
ScrWidth=dm.widthPixels;
}
publicvoidonDraw(Canvascanvas){
//画布背景
canvas.drawColor(Color.WHITE);
floatcirX=ScrWidth/2;
floatcirY=ScrHeight/3;
floatradius=ScrHeight/5;//150;
floatarcLeft=cirX-radius;
floatarcTop=cirY-radius;
floatarcRight=cirX+radius;
floatarcBottom=cirY+radius;
RectFarcRF0=newRectF(arcLeft,arcTop,arcRight,arcBottom);
//画笔初始化
PaintPaintArc=newPaint();
PaintPaintLabel=newPaint();
PaintLabel.setColor(Color.WHITE);
PaintLabel.setTextSize(16);
//位置计算类
XChartCalcxcalc=newXChartCalc();
floatPercentage=0.0f;
floatCurrPer=0.0f;
inti=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)//指定突出哪个块
{
//偏移圆心点位置
floatnewRadius=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;
RectFarcRF1=newRectF(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: http://blog.csdn.net/xcl168

Android(安卓)Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

更多相关文章

随机推荐