Jetpack Compose: как нарисовать такой путь

Таким образом я хотел показать два момента:

Jetpack Compose: как нарисовать такой путь

Есть ли какая-то ссылка, которую я могу найти?

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
1
0
150
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто используйте Canvas и нарисуйте 2 круга и 1 линию.

Canvas(Modifier.fillMaxSize()){

    val radius = 64f //radius of circles
    val strokeWidth = 20f 
    val lineHeight = 300f
    val centerFirstCircle = Offset(100f, 100f)

    drawCircle(
        color = Color.Red,
        radius = radius,
        center = centerFirstCircle,
        style = Stroke(width = strokeWidth)
    )

    //calculate the start and end of the vertical line
    val xLine = centerFirstCircle.x
    val yLine = centerFirstCircle.y + radius + strokeWidth/2

    drawLine(
        color = Red,
        start = Offset(xLine, yLine),
        end = Offset(xLine , yLine + lineHeight),
        strokeWidth = strokeWidth
    )

    //calculate the center of the second circle
    val centerSecondCircle = Offset( centerFirstCircle.x,
        centerFirstCircle.y + (radius*2) + lineHeight + (strokeWidth/2 *2) )

    drawCircle(
        color = Color.Red,
        radius = radius,
        center = centerSecondCircle,
        style = Stroke(width = strokeWidth)
    )
}

Другие вопросы по теме