上文弄了個繪製報表的，有了報表，當然想一併也繪個餅圖，柱形圖之類的玩玩，看看了API，覺得應當很簡單，餅圖實現了下，

實現程式碼確實也很簡單，Android的這些函式封裝的確實好用。

   效果圖如下:

      不過實現過程還是比較曲折的，首先碰到一個sdk的bug,drawTextOnPath()用法明明是對的，但老是不顯示沒效果，後面

才查到，這個是BUG,後來在http://blog.csdn.net/yanzi1225627/article/details/8583066 上查到解決方法是在view的建構函式裡設定this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);  才算能繼續下去。

package com.xcl.chart;

/**
 * Canvas練習 
 * 	  自已畫餅圖，實現出來後覺得也算實用.
 *   
 * author:xiongchuanliang
 * date:2014-4-6
 */

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.DisplayMetrics;
import android.view.View;

@SuppressLint("NewApi")
public class PanelPieChart1 extends View {
	
	private int ScrHeight;
	private int ScrWidth;
					
	private Paint[] arrPaintArc;
	private Paint PaintText = null;
	/*
	final int[] colors = new int[]{			
			R.color.red,
			R.color.white,
			R.color.green,
			R.color.yellow,
			R.color.blue,				
		};*/
	
	//RGB顏色陣列
	private final int arrColorRgb[][] = { {77, 83, 97},  
							              {148, 159, 181},  
							              {253, 180, 90},
							              {52, 194, 188},
							              {39, 51, 72},
							              {255, 135, 195},
							              {215, 124, 124},
							              {180, 205, 230}} ;
	
	//演示用的比例,實際使用中，即為外部傳入的比例引數
	final float arrPer[] = new float[]{20f,30f,10f,40f};
	
	public PanelPieChart1(Context context){
		super(context);
		
		//解決4.1版本 以下canvas.drawTextOnPath()不顯示問題			
		this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
		
		//螢幕資訊
		DisplayMetrics dm = getResources().getDisplayMetrics();
		ScrHeight = dm.heightPixels;
		ScrWidth = dm.widthPixels;
					
		//設定邊緣特殊效果
	    BlurMaskFilter PaintBGBlur = new BlurMaskFilter(
	    						1, BlurMaskFilter.Blur.INNER);

		arrPaintArc = new Paint[5];	
		//Resources res = this.getResources();
		for(int i=0;i<5;i++)
		{
			arrPaintArc[i] = new Paint();			
			//arrPaintArc[i].setColor(res.getColor(colors[i] )); 
			arrPaintArc[i].setARGB(255, arrColorRgb[i][0], arrColorRgb[i][1], arrColorRgb[i][2]);
			arrPaintArc[i].setStyle(Paint.Style.FILL);
			arrPaintArc[i].setStrokeWidth(4);
			arrPaintArc[i].setMaskFilter(PaintBGBlur);
		}
			
		PaintText = new Paint();
		PaintText.setColor(Color.BLUE);
		PaintText.setTextSize(22);
		//PaintText.setTypeface(Typeface.DEFAULT_BOLD);
	}
	
	public void onDraw(Canvas canvas){
		//畫布背景
		canvas.drawColor(Color.WHITE);
		
		float cirX = ScrWidth / 2;
		float cirY = ScrHeight / 3 ;
		float radius = ScrHeight / 5 ;//150;
		//先畫個圓確定下顯示位置
		//canvas.drawCircle(cirX,cirY,radius,PaintArcRed);
								
		float arcLeft = cirX - radius;
		float arcTop  = cirY - radius ;
		float arcRight = cirX + radius ;
		float arcBottom = cirY + radius ;
		RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom);	
		
		Path pathArc=new Path();   		    			    
		// x,y,半徑 ,CW
		pathArc.addCircle(cirX,cirY,radius,Direction.CW); 
		    //繪出餅圖大輪廓
		canvas.drawPath(pathArc,arrPaintArc[0]);
	 
		float CurrPer = 0f; //偏移角度
		float Percentage =  0f; //當前所佔比例
								
		int scrOffsetW = ScrWidth - 200;
		int scrOffsetH = ScrHeight - 300;
		int scrOffsetT = 40;
							
		//Resources res = this.getResources();			
		int i= 0;
		for(i=0; i<3; i++) //注意迴圈次數噢
		{
			//將百分比轉換為餅圖顯示角度
			Percentage = 360 * (arrPer[i]/ 100);
			Percentage = (float)(Math.round(Percentage *100))/100;
			 
			//在餅圖中顯示所佔比例
			canvas.drawArc(arcRF0, CurrPer, Percentage, true, arrPaintArc[i+2]); 
			
			//當前顏色
			canvas.drawRect(scrOffsetW ,scrOffsetH + i * scrOffsetT,
					scrOffsetW + 60 ,scrOffsetH - 30 + i * scrOffsetT, arrPaintArc[i+2]);
			//當前比例	
			canvas.drawText(String.valueOf(arrPer[i]) +"%",
					scrOffsetW + 70,scrOffsetH + i * scrOffsetT, PaintText);
			//下次的起始角度
			CurrPer += Percentage;
		}
		
		//最末尾比例說明
		canvas.drawRect(scrOffsetW ,scrOffsetH + i * scrOffsetT,
				scrOffsetW + 60 ,scrOffsetH - 30 + i * scrOffsetT, arrPaintArc[0]);
			
		canvas.drawText(String.valueOf(arrPer[i]) +"%",
				scrOffsetW + 70,scrOffsetH + i * scrOffsetT, PaintText);

		//Demo的作者資訊
		canvas.drawText("author:xcl",
				70,scrOffsetH + i+1 * scrOffsetT, PaintText);
		canvas.drawText("date:2014-4-7",
				70,scrOffsetH + i * scrOffsetT, PaintText);			
		
	}		
}
 

 程式碼註釋算比較詳細，就不多說了，主要整理下我實現過程中瞭解到的一些使用方法.

      RectF  定義矩形,這個用得很多，定座標時，腦子中一定要有一個清楚的印象，示意圖如下:

            要是在實現時確定不了，可以用 canvas.drawRect(new RectF(left, top, right bottm), paint);  在螢幕上畫出來看看效果。

       Path: 官網Doc 

             這個在可以先用下面的程式碼看看效果:            

Paint paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
Path p = new Path();
p.moveTo(20,20);
p.lineTo(100,200);
p.lineTo(200,100);
p.lineTo(240,155);
canvas.drawPath(p,paint);
 

   path不斷可以畫線，還可以有特殊的用法:    

   其實現程式碼如下:           

float cirX = ScrWidth / 2;
			float cirY = ScrHeight / 3 ;
			float radius = ScrHeight / 5 ;
			
		    Path pathArc=new Path();   		    			    
			// x,y,半徑 ,CW為順時針繪製
			pathArc.addCircle(cirX,cirY,radius,Direction.CW); 

		    canvas.drawPath(pathArc,arrPaintArc[0]);
		    canvas.drawTextOnPath("環繞文字",pathArc,0,30,PaintText); //在路徑上繪製文字

drawTextOnPath 函式原型:

          drawTextOnPath (String text,Path ath,float hOffset,float vOffset,Pating paint)

        這個函式能讓文字跟著path跑,hOffset引數指定水平偏移 vOffset引數指定垂直偏移量是多少。

     drawArc()函式畫圓弧的，一個最典型的用法如下:

 canvas.drawArc(new RectF(0, 0, 128, 128), 0,120, true, new Paint(
		    		Paint.ANTI_ALIAS_FLAG));

還有一個Style屬性要說下，它決定了是空心，還是實心之類。
    Paint.Style.STROKE:Only draw the outline of the shapes
    Paint.Style.FILLE:Only fill the shapes
    Paint.Style.FILL_AND_STROKE:Fill and draw the outline of the shapes

大致就這些了。

MAIL: [email protected]

BLOG: http://blog.csdn.net/xcl168