Как нарисовать вертикальную линию в холсте для создания реактивного ранца

У меня есть значение в процентах от 0 до 100%, которое находится в типе Float. Я рисую вертикальные линии, используя Offset, значение которого также имеет тип Float. Итак, как я могу преобразовать значения в значения пикселей?

Значения

 Pixel in size 996.0
2023-02-12 19:02:01.063 13417-13417 MainActivity            com.example.queueapplication         E  name Low --++-- startPoint 0.0 --++-- endPoint 16.666666 
2023-02-12 19:02:01.064 13417-13417 MainActivity            com.example.queueapplication         E  name Normal --++-- startPoint 16.666666 --++-- endPoint 33.333332 
2023-02-12 19:02:01.064 13417-13417 MainActivity            com.example.queueapplication         E  name Elevated --++-- startPoint 33.333332 --++-- endPoint 50.0 
2023-02-12 19:02:01.064 13417-13417 MainActivity            com.example.queueapplication         E  name High --++-- startPoint 50.0 --++-- endPoint 66.666664 
2023-02-12 19:02:01.064 13417-13417 MainActivity            com.example.queueapplication         E  name Very High --++-- startPoint 66.666664 --++-- endPoint 83.33333 
2023-02-12 19:02:01.064 13417-13417 MainActivity            com.example.queueapplication         E  name Extremely High --++-- startPoint 83.33333 --++-- endPoint 100.0

Я пробовал этот кусок кода

@Composable
fun DrawProgressBar() {
    val activity = LocalContext.current as AppCompatActivity
    val rangeComposition = RangeComposition()
    val itemLst = rangeComposition.bpExplained
    val boxSize = 30.dp
    Box(
        modifier = Modifier
            .background(Color.LightGray)
            .height(height = boxSize)
    ) {
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            val canvasWidth = size.width
            drawLine(
                start = Offset(x = 0f, y = (boxSize / 2).toPx()),
                end = Offset(x = canvasWidth, y = (boxSize / 2).toPx()),
                color = Color.Black,
                strokeWidth = 8.dp.toPx(),
            )
            activity.logE("Pixel in size $canvasWidth")
            itemLst.forEach { rangeItem ->
                val endPointInPixel = rangeItem.endPoint
                activity.logE("name ${rangeItem.name} --++-- startPoint ${rangeItem.startPoint} --++-- endPoint ${rangeItem.endPoint} ")
                drawLine(
                    start = Offset(x = endPointInPixel, y = 0F),
                    end = Offset(x = endPointInPixel, y = boxSize.toPx()),
                    color = Color.Black,
                    strokeWidth = 4.dp.toPx(),
                )
            }
        }
    }
}

Фактический результат

Мои все линии принимают значение Float и очень близко друг к другу.

Ожидаемый результат

android kotlin android-jetpack-compose android-jetpack-compose-canvas

12.02.2023 20:11

Конечные и Readonly классы в PHP

В прошлом, когда вы не хотели, чтобы другие классы расширяли определенный класс, вы могли пометить его как final.

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

БЭМ: Конвенция об именовании CSS

Я часто вижу беспорядочный код CSS, особенно если проект большой. Кроме того, я совершал эту ошибку в профессиональных или личных проектах и...

Революционная веб-разработка ServiceNow

В быстро развивающемся мире веб-разработки ServiceNow для достижения успеха крайне важно оставаться на вершине последних тенденций и технологий. По...

Как добавить SEO(Search Engine Optimization) в наше веб-приложение и как это работает?

Заголовок веб-страницы играет наиболее важную роль в SEO, он помогает поисковой системе понять, о чем ваш сайт.

Конфигурация Jest в angular

В этой статье я рассказываю обо всех необходимых шагах, которые нужно выполнить при настройке jest в angular.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете разделить width из Canvas на количество шагов, чтобы получить ширину каждого шага, или вы можете умножить ширину холста на процент, чтобы получить значение смещения.

Что-то вроде:

   Canvas(Modifier.fillMaxSize()) {

        val strokeWidth = 2.dp
        val color = Black

        val strokeWidthPx = density.run { strokeWidth.toPx() }
        val width = size.width
        val height = size.height

        drawLine(
            start = Offset(x = 0f, y = height / 2),
            end = Offset(x = width, y = height / 2),
            color = color,
            strokeWidth = strokeWidthPx,
        )

        val stepCount = itemsList.size + 1
        val stepWidth = (width / stepCount).toFloat()
        itemsList.forEach { index ->
            val endPointInPixel = stepWidth * (index + 1)

            drawLine(
                start = Offset(x = endPointInPixel, y = 0F),
                end = Offset(x = endPointInPixel, y = height),
                color = color,
                strokeWidth = strokeWidthPx,
            )
        }

    }

Что такое RangeItem?

— 12.02.2023 20:46

@VivekModi использует его просто как указатель. В вашем случае вы можете избежать этого и просто умножить ширину на процент.

— 12.02.2023 20:48

Можешь посмотреть в этом выпуске

— 12.02.2023 22:15

12.02.2023 20:32