Hi another question I have value in Percentage from `0` to `

Question

Hi another question I have value in Percentage from `0` to `100 ` which is in `Float` type I am drawing vertical lines but in `Offset` which value is also in `Float` type So how can I convert values in `pixel` values

KotlinLeaner · Answer

``` 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 gt 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 ```

KotlinLeaner · Answer

Pixel in size `996 0` in LogCat

KotlinLeaner · Answer

Actual Output is like this

KotlinLeaner · Answer

Expected Output

romainguy · Answer

Are the x positions of the tick marks expressed in percentage If so multiply them by canvasWidth

KotlinLeaner · Answer

yes x is in the percentage It going out of width

KotlinLeaner · Answer

```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 fillMaxSize val strokeWidth = 8 dp val canvasWidth = size width val canvasHeight = size height val strokeWidthPx = density run strokeWidth toPx rangeComposition initialiseList drawLine start = Offset x = 0f y = canvasHeight 2 end = Offset x = canvasWidth y = canvasHeight 2 color = Color Black strokeWidth = strokeWidthPx itemLst forEachIndexed index rangeItem gt val endPointInFloat = rangeItem endPoint activity logE name $ rangeItem name ++ startPoint $ rangeItem startPoint ++ endPoint $ rangeItem endPoint if index = itemLst lastIndex drawLine start = Offset x = endPointInFloat y = 0F end = Offset x = endPointInFloat y = boxSize toPx color = Color Black strokeWidth = 4 dp toPx ```

romainguy · Answer

Wait when you say percentage is your float in 0 100 If so divide by 100f and multiply by canvasWidth

KotlinLeaner · Answer

yes it s in 0 100 Perfect thanks a million This works with your suggestion

KotlinLeaner · Answer

If we use ```cap = StrokeCap Round ``` inside `drawLine` then why this is going out of Canvas

KotlinLeaner · Answer

```Box modifier = Modifier background Color LightGray height height = boxSize Canvas modifier = Modifier fillMaxSize 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 Black strokeWidth = strokeWidthPx cap = StrokeCap Round ```

romainguy · Answer

Because round caps start at the line endpoints

KotlinLeaner · Answer

Okk got it

KotlinLeaner · Answer

Can we give color to cap

romainguy · Answer

So it has to be the same as the line

romainguy · Answer

You can draw caps separately using a Path though

KotlinLeaner · Answer

Actual output

KotlinLeaner · Answer

Expected output

KotlinLeaner · Answer

``` Composable fun DrawProgressBar val activity = LocalContext current as AppCompatActivity val rangeComposition = RangeComposition val itemLst = rangeComposition bpExplained val boxSize = 30 dp val brush = Brush horizontalGradient listOf Color Red Color Blue val progressBarPointer = rangeComposition findReadingWithPointer 142 90 second Box modifier = Modifier background Color White height height = boxSize Canvas modifier = Modifier fillMaxSize 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 val progressBarPointerInPixel = progressBarPointer 100f canvasWidth activity logE progressBarPointerInPixel $progressBarPointerInPixel drawLine brush = brush start = Offset x = 0f y = canvasHeight 2 end = Offset x = progressBarPointerInPixel y = canvasHeight 2 strokeWidth = strokeWidthPx cap = StrokeCap Round drawArc topLeft = Offset x = progressBarPointerInPixel y = canvasHeight 2 size = Size 8 dp toPx strokeWidthPx color = Color Cyan startAngle = 90f sweepAngle = 180f useCenter = true itemLst forEachIndexed index rangeItem gt 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 = 4 dp toPx ```

KotlinLeaner · Answer

I tried this so how how can I do through path

romainguy · Answer

You need to shift your arc up and give it the same color as the background

romainguy · Answer

You ll also need a rectangle Or draw a line with a round cap using the background color to erase the part between the orange and blue lines in your desired output screenshot

KotlinLeaner · Answer

Ok I ll try that one