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

   这里画了个饼图的变种，具有分割突出效果的饼图(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: http://blog.csdn.net/xcl168