Android Canvas練習(3)自已繪柱形圖

繪完報表，餅圖，接下來就繪制柱形圖，柱形很容易，就是畫線和框就行了。我分別繪制一個豎向的，一個橫向的柱形圖。

效果圖如下:

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICC4vcnPtPrC6zo8L3A+CjxwPiAgIDwvcD4KPHByZSBjbGFzcz0="brush:java;">package com.xcl.canvas03; /** * Canvas練習 * 自已畫餅圖和柱形圖，實現出來後覺得也算實用. * author:xiongchuanliang * date:2014-4-6 */ import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; import android.content.res.Resources; import android.graphics.BlurMaskFilter; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Typeface; import android.graphics.Path.Direction; import android.graphics.RectF; import android.util.DisplayMetrics; import android.view.Menu; import android.view.View; @SuppressLint("NewApi") public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); //setContentView(new PanelRpt(this)); setContentView(new PanelBar(this)); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } class PanelBar 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, }; //餅圖演示用的比例,實際使用中，即為外部傳入的比例參數 final float arrPer[] = new float[]{20f,30f,10f,40f}; //柱形圖演示用的比例,實際使用中，即為外部傳入的比例參數 private final int[] arrNum = {1,4,3,2}; public PanelBar(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].setStyle(Paint.Style.FILL); arrPaintArc[i].setStrokeWidth(4); arrPaintArc[i].setMaskFilter(PaintBGBlur); } PaintText = new Paint(); PaintText.setColor(Color.BLUE); PaintText.setTextSize(30); PaintText.setTypeface(Typeface.DEFAULT_BOLD); } public void onDraw(Canvas canvas){ //畫布背景 canvas.drawColor(Color.WHITE); //餅圖標題 canvas.drawText("自繪柱形圖", 100,50, PaintText); arrPaintArc[0].setTextSize(25); arrPaintArc[3].setTextSize(25); int i= 0; int lnWidth = 10; //標識線寬度 int lnSpace = 40; //標識間距 int startx = 120; int endx = startx + 20; int starty = ScrHeight / 3 ; int endy = ScrHeight / 3 ; int initX = startx; int initY = starty; int rectHeight = 10; //柱形框高度 ///////////////////////// //豎向柱形圖 /////////////////////////// // Y 軸 標識線和值 for(i=0; i<5; i++) { starty = initY - (i+1) * lnSpace; endy = starty; if(i == 0) continue; canvas.drawLine( startx - lnWidth ,starty + lnSpace ,initX,endy + lnSpace, PaintText); canvas.drawText(Integer.toString(i), initX - 30,endy + lnSpace, PaintText); } // Y 軸 canvas.drawLine( startx ,starty ,initX ,initY, PaintText); //X 軸 for(i=0; i< arrNum.length; i++) { startx= initX + (i+1) * lnSpace; endx = startx; //柱形 canvas.drawRect(startx - rectHeight ,initY, startx + rectHeight ,initY - arrNum[i] * lnSpace, arrPaintArc[0]); //標識文字 canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[0]); } canvas.drawLine( initX ,initY ,ScrWidth - 10 ,initY, PaintText); ////////////////////////////////////////////////////////////////// ///////////////////////// //橫向柱形圖 /////////////////////////// startx = 120;// ScrWidth / 2 - 50; endx = startx + 20; starty = ScrHeight - ScrHeight / 3 ; endy = ScrHeight - ScrHeight / 3 ; initX = startx; initY = starty; // Y 軸 傳入參數及柱形 for(i=0; i 代碼很簡單，不多做說明了。 不過有個地方要注意，實際值與刻度的關系在這個Demo中並沒做處理噢。

附其它繪制圖表的鏈接:
Android Canvas練習(1)畫一張報表來玩
Android Canvas練習(2)自已繪餅圖
Android Canvas練習(3)自已繪柱形圖
Android Canvas練習(4)自已繪折線圖

MAIL: [email protected]

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