Отрисовка дуги

Для отрисовки дуги применяется функция drawArc()

fun drawArc(
    color: Color,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Эта функция принимает следующие параметры:

• color: цвет дуги

• startAngle: начальный угол, где 0 соответствует трем часам

• sweepAngle: размер дуги в градусах, рисуемой по часовой стрелке относительно startAngle.

• useCenter: флаг, который указывает, должна ли дуга замыкать центр границ.

• topLeft: точка верхнего левого угла (значение типа Offset)

• size: размер прямоугольника, в который вписывается дуга

• alpha: прозрачность, применяемая к цвету дуги в виде значения из диапазона от 0.0f до 1.0f

• style: стиль заполнения дуги (значение DrawStyle)

• colorFilter: цветовой фильтр ColorFilter, который применяется к цвету дуги

• blendMode: алгоритм смешивания, применяемый к цвету

Например, следующий код рисует дугу, начинающуюся с 20°, с разверткой 90° в прямоугольнике размером 250х250 dp:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.geometry.Size

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                drawArc(
                    Color.Blue,
                    startAngle = 20f,
                    sweepAngle = 90f,
                    useCenter = true,
                    size = Size(250.dp.toPx(), 250.dp.toPx())
                )
            }
        }
    }
}

В примере благодаря параметру useCenter = true концы дуги соединяются с центральной точкой условной окружности, образуя сектор окружности. При значении false концы дуги соединяются между собой:

Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
    drawArc(
        Color.Blue,
        startAngle = 20f,
        sweepAngle = 90f,
        useCenter = false,
        size = Size(250.dp.toPx(), 250.dp.toPx())
    )
}