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

У меня есть значение в процентах от 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

Коллекции (ArrayList , HashSet , HashMap)

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

Ответы 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