How to make vertical dash/dotted in jetpack compose

Question

I want to make dashed/dotted vertical line in canvas. I tried to use this answer 1. It works but not perfect. I'll show you my code, what I am tried.

@Composable
fun DrawProgressBar() {
    val rangeComposition = RangeComposition()
    val itemLst = rangeComposition.bpExplained
    val boxSize = 30.dp
    Box(
        modifier = Modifier
            .background(Color.White)
            .height(height = boxSize)
    ) {
        Canvas(
            modifier = Modifier.fillMaxSize()
        ) {
            val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f, 10f), 0f)
            val strokeWidth = 8.dp
            val canvasWidth = size.width
            val canvasHeight = size.height
            val strokeWidthPx = density.run { strokeWidth.toPx() }
            drawLine(
                start = Offset(x = 0f, y = canvasHeight / 2),
                end = Offset(x = canvasWidth, y = canvasHeight / 2),
                color = Color.Gray,
                strokeWidth = strokeWidthPx,
                cap = StrokeCap.Round,
            )
            itemLst.forEachIndexed { index, rangeItem ->
                val endPointInPixel = (rangeItem.endPoint / 100f) * canvasWidth
                if (index != itemLst.lastIndex) {
                    drawLine(
                        start = Offset(x = endPointInPixel, y = 0F),
                        end = Offset(x = endPointInPixel, y = boxSize.toPx()),
                        color = Color.Black,
                        strokeWidth = 2.dp.toPx(),
                        pathEffect = pathEffect,
                    )
                }
            }
        }
    }
}

Actual Output

Expected Outout

score 1 · Accepted Answer · answered Feb 13 '23 at 00:16

1

You can use:

val pathEffect = PathEffect.dashPathEffect
          (floatArrayOf(canvasHeight/19, canvasHeight/19), 0f)

answered Feb 13 '23 at 00:16

Gabriele Mariotti

320,139
94
887
841

why did you divide by `canvasHeight/19` ? – Kotlin Learner Feb 13 '23 at 00:21
why did you choose `19` ? – Kotlin Learner Feb 13 '23 at 00:22
why did you use 2 times of `canvasHeight/19` ? Sorry I am confused. – Kotlin Learner Feb 13 '23 at 00:22
@VivekModi In the doc: `Draws a shape as a series of dashes with the given intervals and offset into the specified interval array. The intervals must contain an even number of entries (>=2). The even indices specify "on" intervals and the odd indices represent "off" intervals.` In you example you have 19 intervals, 10 on, and 9 off and all of them have the same size. – Gabriele Mariotti Feb 13 '23 at 00:25
1

To be honest @GabrieleMariotti you are a one of best teacher in the world. Thank you so much for guidance... – Kotlin Learner Feb 13 '23 at 00:28

How to make vertical dash/dotted in jetpack compose

1 Answers1

Linked