ViewのonDrawでいくつかアークの円を描く

onDraw()を通じて、いくつかアークの円を一緒に描きましょう。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/b6fabf94-e29c-af54-349b-b3371cd9d2cd.png)
###Viewのサブクラスを作る

```

class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }
}
```
###Viewを作る時、普段はdpを使います。
KotlinのExtension Functions/Propertiesでpx→dpに切替

```
val Float.px
    get()=TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            this,
            Resources.getSystem().displayMetrics
    )
val Int.dp
get() = this.toFloat().px
```
###円を作る

```
//丸のredius
private val RADIUS=150f.px

class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {
        canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                ,0f,360f,true,paint)

    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/c45d508a-6512-79f2-cc14-2f17f0240e9e.png)

###drawArcのstartAngleとsweepAngleの属性を設定すると角度が控えます
ペンのカラーを変化します

```
//円のredius
private val RADIUS=150f.px
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]

            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
        }


    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/26a3fcaf-d3a5-e5f4-2444-75cbb01696b2.png)

###引き続き、一つのアークを出します。アークを出すために、角度の設定が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/bc31c724-3e30-905e-83f9-b0379c202b9e.png)


```

//丸のredius
private val RADIUS=150f.px
private val OFFSET_LENGTH=20.dp
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]
            if (index==1){
                //canvasの移動の距離計算　三角関数
                canvas.translate(OFFSET_LENGTH* cos(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat(),
                        OFFSET_LENGTH* sin(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat()
                )
            }



            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
        }


    }
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/8bd10188-3de5-1b79-2778-754095eeff28.png)

###何でこのようななりましたか
canvaの背景第一回を変更したあと、戻るのが必要です。 
canvas.save()とcanvas.restore()を使えば解消できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906922/b6fabf94-e29c-af54-349b-b3371cd9d2cd.png)

```
//丸のredius
private val RADIUS=150f.px
private val OFFSET_LENGTH=20.dp
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]
            if (index==1){
                //canvasの移動の距離計算　三角関数
                canvas.save()
                canvas.translate(OFFSET_LENGTH* cos(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat(),
                        OFFSET_LENGTH* sin(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat()
                )
            }
            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
            if (index==1){
                canvas.restore()
            }
        }


    }
}

```
###具体的なソースを[説明ソース](https://github.com/zhanghangcode/Kotlin)に置きました。