Hi everyone, I'm working on a `progress border` fo...

# compose

[Alejandro Rios]

Hi everyone, I'm working on a progress border for a pet project using CMP, I'm having an issue where the text is cut, more details in the 🧵

[Alejandro Rios]

So this is the code that I have right now:

Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .rotate(boardRotationAngle)
            .drawBehind {
                scale(1f, -1f, Offset(size.width / 2, size.height / 2)) {
                    rotate(if (isAndroid) -90f else 0f) {
                        if (path.isEmpty) {
                            path.addRoundRect(
                                RoundRect(
                                    Rect(offset = Offset.Zero, size),
                                    cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx())
                                )
                            )
                        }

                        pathWithProgress.reset()

                        pathMeasure.setPath(path, forceClosed = false)
                        pathMeasure.getSegment(
                            startDistance = 0f,
                            stopDistance = pathMeasure.length * borderProgress,
                            pathWithProgress,
                            startWithMoveTo = true
                        )

                        clipPath(path) {
                            drawRect(color)
                        }

                        drawPath(
                            path = pathWithProgress,
                            style = Stroke(5.dp.toPx()),
                            color = Color(0xFFD28B2D)
                        )

                        val progressEndPos = if (pathMeasure.getPosition(pathMeasure.length * progress) != Offset.Unspecified) {
                            val (x, y) = pathMeasure.getPosition(pathMeasure.length * progress)
                            Offset(x, y)
                        } else {
                            Offset(0f, 0f)
                        }

                        drawCircle(
                            color = Color(0xFFD28B2D),
                            center = progressEndPos,
                            radius = 15.dp.toPx()
                        )

                        drawText(
                            textMeasurer = textMeasurer,
                            text = wordsGuessed,
                            style = style,
                            topLeft = Offset(
                                x = progressEndPos.x - textLayoutResult.size.width / 2,
                                y = progressEndPos.y - textLayoutResult.size.height / 2,
                            )
                        )
                    }
                }
            }
    ) { }

The box has a size of 350, I have to rotate the square so the orange line you see starts from topLeft position(might need more adjustments there but I'll work on that later), right now I have no idea why the letter is cut in half(this case a 3), that happens when the circle is on top or bottom, left or right appears to be ok.

I tried extracting the drawText from the scale part, but no luck

[romainguy]

Why do you do a clipPath+drawRect instead of just drawing the path with that color?

[Alejandro Rios]

I'm not that experience with canvas, if I remove the clip I'll lose the round borders

[romainguy]

with drawPath(path, color)?

[romainguy]

you shouldn’t lose the rounded corners, the path is a rounded rect (alternatively you can draw a rounded rect directly, both are cheaper than clipping with a path)

[romainguy]

also you should not do this:

[romainguy]

pathWithProgress.reset()

                        pathMeasure.setPath(path, forceClosed = false)

[romainguy]

every frame

[romainguy]

instead use drawWithCache{} to perform these expensive operations only once

[Alejandro Rios]

Thanks for the suggestions, I will applied them, Is because of that the text looks cut in half?

[romainguy]

No, I have no idea why the text is cut in half 😕 Is that on Android?

[Alejandro Rios]

Nope, is Compose multiplatform, thanks for your suggestions Romain 🙂

[romainguy]

Try without the clipPath, your text seems suspiciously clipped by that shape

[romainguy]

it shouldn’t be, but I can’t think of anything else

[Alejandro Rios]

Will try that, thanks