https://kotlinlang.org logo
#compose
Title
# compose
a

Alejandro Rios

03/08/2024, 11:08 PM
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 🧵
So this is the code that I have right now:
Copy code
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
r

romainguy

03/08/2024, 11:17 PM
Why do you do a clipPath+drawRect instead of just drawing the path with that color?
a

Alejandro Rios

03/08/2024, 11:20 PM
I'm not that experience with canvas, if I remove the
clip
I'll lose the round borders
r

romainguy

03/08/2024, 11:26 PM
with
drawPath(path, color)
?
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)
also you should not do this:
Copy code
pathWithProgress.reset()

                        pathMeasure.setPath(path, forceClosed = false)
every frame
instead use
drawWithCache{}
to perform these expensive operations only once
a

Alejandro Rios

03/08/2024, 11:30 PM
Thanks for the suggestions, I will applied them, Is because of that the text looks cut in half?
r

romainguy

03/08/2024, 11:54 PM
No, I have no idea why the text is cut in half 😕 Is that on Android?
a

Alejandro Rios

03/08/2024, 11:57 PM
Nope, is Compose multiplatform, thanks for your suggestions Romain 🙂
r

romainguy

03/09/2024, 12:06 AM
Try without the clipPath, your text seems suspiciously clipped by that shape
it shouldn’t be, but I can’t think of anything else
a

Alejandro Rios

03/09/2024, 12:10 AM
Will try that, thanks