【AndroidのCanvasに向き合おう】円・楕円・扇・円弧を描こう

Pocket

[`yahoo` not found]

Canvasに円・楕円・扇・円弧を描画する

Canvasに円・楕円・扇・円弧を描画します。
下記のメソッドを使いこなすことで円グラフ等の複雑な図形が描画できるようになります。

円・楕円・扇・円弧を描画する
void	drawCircle(float cx, float cy, float radius, Paint paint)	中心座標と半径を指定して円を描く float cx:中心座標のx座標を指定する。 float cy:中心座標のy座標を指定する。 float radius:円の半径を指定する。 Paint paint:色、塗りつぶし方法を指定する。
void	drawOval(float left, float top, float right, float bottom, Paint paint)	四角形の左上と右下の座標を指定し、その四角形に内接する楕円を描画する。 float left:四角形の左上のx座標を指定する。 float top:四角形の左上のy座標を指定する。 float right:四角形の右下のx座標を指定する。 float bottom:四角形の右下のy座標を指定する。 Paint paint:色、塗りつぶし方法を指定する。
void	drawOval(RectF oval, Paint paint)	RectFを使って位置と幅高さを指定し四角形を定義し、その四角形に内接する楕円を描画する。 RectF rect:四角形の位置、幅・高さを指定する。 Paint paint:色、塗りつぶし方法を指定する。
void	drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)	四角形の左上と右下の座標を指定し、その四角形に内接する楕円を定義する。定義した楕円の描画開始角度と描画終了角度、扇または円弧を指定することで扇、円弧を描画する。 float left:四角形の左上のx座標を指定する。 float top:四角形の左上のy座標を指定する。 float right:四角形の右下のx座標を指定する。 float bottom:四角形の右下のy座標を指定する。 float startAngle:扇・円弧の描画開始角度を指定する。時計の3時を0度として時計周りを正方向とします。負数を指定することで反時計回りの角度になります。 360度を超える値を指定すると360で剰余算をした値に変換されます。 float sweepAngle:扇・円弧の描画角度を指定する。描画開始角度を0度として時計周りを正方向とします。負数を指定することで反時計回りの角度になります。 360度、-360度を超える値を指定すると360度、-360度に変換されます。 boolean useCenter:扇で描画する場合はtrueを指定し、円弧で描画する場合はfalseを指定する。 Paint paint:色、塗りつぶし方法を指定する。
void	drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)	RectFを使って位置と幅高さを指定し四角形を定義し、その四角形に内接する楕円を定義する。定義した楕円の描画開始角度と描画角度、扇または円弧を指定することで扇、円弧を描画する。 RectF rect:四角形の位置、幅・高さを指定する。 float startAngle:扇・円弧の描画開始角度を指定する。時計の3時を0度として時計周りを正方向とします。負数を指定することで反時計回りの角度になります。 360度を超える値を指定すると360で剰余算をした値に変換されます。 float sweepAngle:扇・円弧の描画角度を指定する。描画開始角度を0度として時計周りを正方向とします。負数を指定することで反時計回りの角度になります。 360度、-360度を超える値を指定すると360度、-360度に変換されます。 boolean useCenter:扇で描画する場合はtrueを指定し、円弧で描画する場合はfalseを指定する。 Paint paint:色、塗りつぶし方法を指定する。

使用例

実際にcanvasを描画してみましょう。
今回も独自Viewを定義しました。

    public class MyCanvasCircle extends View{
        public MyCanvasCircle(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            Paint paint = new Paint();
            //線幅を10に設定
            paint.setStrokeWidth(10);
            //枠線だけを描画する
            paint.setStyle(Paint.Style.STROKE);
            //色を赤色に設定
            paint.setColor(Color.RED);
            //中心座標[x:250,y:250],半径50の円を描く
            canvas.drawCircle(250,250,50, paint);
            //枠内を塗りつぶすを描画する
            paint.setStyle(Paint.Style.FILL);
            //色を緑色に設定
            paint.setColor(Color.GREEN);
            /**
            * 下記の四角形に内接する楕円を描く
            * ・左上座標[x:200,y:400]
            * ・右下座標[x:400,y:500]
            */
            canvas.drawOval(200,400,400,500,paint);
            //色を青色に設定
            paint.setColor(Color.BLUE);
            /**
            * 四角形を定義する
            * ・左上座標[x:200,y:600]
            * ・右下座標[x:500,y:700]
            */
            RectF rectF = new RectF(200,600,500,700);
            //Rectで定義された四角形に内接する楕円を描く
            canvas.drawOval(rectF , paint);
            //色を黄色に設定
            paint.setColor(Color.YELLOW);
            /**
            * 四角形に内接する円の円弧・扇を描画する
            * ・左上座標[x:200,y:800]
            * ・右下座標[x:300,y:900]
            * ・描画開始角度をx軸から20度の位置に指定
            * ・描画角度を描画開始角度から120度の位置に指定
            * ・扇状で描画する
            */
            canvas.drawArc(200,800,300,900,720,120,true,paint);
            //色を青色に設定
            paint.setColor(Color.BLACK);
            /**
            * 四角形を定義する
            * ・左上座標[x:200,y:1000]
            * ・右下座標[x:300,y:1100]
            */
            RectF roundRectF = new RectF(200,1000,300,1100);
            /**
            * Rectで定義された四角形に内接する円の円弧・扇を描画する
            * ・描画開始角度をx軸から-20度の位置に指定
            * ・描画角度を描画開始角度から-120度の位置に指定
            * ・円弧状を描画する
            */
            canvas.drawArc(roundRectF ,-20 , -120 ,false,paint);
        }
    }