android 画饼图 Canvas drawArc

在android上，展示可用空间和已用空间形象的展示时，用到饼图。

原理其实就是一个圆，然后分成不同的颜色块。如下图：

这里用到了一个方法，

android.graphics.Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

android.graphics.RectF.RectF(float left, float top, float right, float bottom)

Paint是用来设置颜色，风格，

paint.setStyle(Style.STROKE);设置为空心

paint.setStyle(Style.FILL);设置为实心。

paint.setStrokeWidth(1);设置边框像素。

这里需要注意一下所有颜色的角度加起来必须为360度，否则画出来的圆会有瑕疵。如下图：

源代码见：http://henzil.googlecode.com/svn/trunk/bingtuDemo/

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

oval :指定圆弧的外轮廓矩形区域。
startAngle: 圆弧起始角度，单位为度。
sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。
paint: 绘制圆弧的画板属性，如颜色，是否填充等。

本例演示了drawArc的四种不同用法,

1. 填充圆弧但不含圆心：

mPaints[ 0 ] = new Paint(); mPaints[ 0 ].setAntiAlias( true ); mPaints[ 0 ].setStyle(Paint.Style.FILL); mPaints[ 0 ].setColor( 0x88FF0000 ); mUseCenters[ 0 ] = false ;

2. 填充圆弧带圆心（扇形）

mPaints[ 1 ] = new Paint(mPaints[ 0 ]); mPaints[ 1 ].setColor( 0x8800FF00 ); mUseCenters[ 1 ] = true ;

3. 只绘圆周，不含圆心

mPaints[ 2 ] = new Paint(mPaints[ 0 ]); mPaints[ 2 ].setStyle(Paint.Style.STROKE); mPaints[ 2 ].setStrokeWidth( 4 ); mPaints[ 2 ].setColor( 0x880000FF ); mUseCenters[ 2 ] = false ;

4. 只绘圆周，带圆心（扇形）

mPaints[ 3 ] = new Paint(mPaints[ 2 ]); mPaints[ 3 ].setColor( 0x88888888 ); mUseCenters[ 3 ] = true ;

本例的onDraw

protected void onDraw(Canvas canvas) { canvas.drawColor(Color.WHITE); drawArcs(canvas, mBigOval, mUseCenters[mBigIndex], mPaints[mBigIndex]); for ( int i = 0 ; i < 4 ; i++) { drawArcs(canvas, mOvals[i], mUseCenters[i], mPaints[i]); } mSweep += SWEEP_INC; if (mSweep > 360 ) { mSweep -= 360 ; mStart += START_INC; if (mStart >= 360 ) { mStart -= 360 ; } mBigIndex = (mBigIndex + 1 ) % mOvals.length; } invalidate(); }

同样onDraw之中调用invalidate()，会再触发onDraw，从而不停刷新显示，startAngle, sweepAngle周而复始，形成动画效果，最上的大图顺序显示drawArc的这四种用法：

Paint.Style.STROKE 表示当前只绘制图形的轮廓，而Paint.Style.FILL表示填充图形。

CanvasdrawArc方法介绍" style="margin:0px; padding:0px; border:0px; list-style:none;border:1px solid black;">

更多相关文章

随机推荐