https://kotlinlang.org logo
v

Vinay Gaba

05/18/2020, 4:58 PM
I noticed that in dev11 there was cleanup in the
ContextDrawScope
and
clipRRect
was removed from it. What’s the alternative if I want to clip a rect with rounded corners?
This is how I was creating an Image with rounded corners in dev 10 - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/image/ImageActivity.kt#L292 Update: This link points to code that has now been updated with the answer below. If you are still interested in what the code looked like in dev10, here’s the link - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/pull/35/files#diff-fbaf449692634088029172f4a1496f5eL292
I was trying to update it to this in dev11 but I’m not seeing round corners. I’m probably using the API incorrectly
Copy code
private data class RoundedCornerClipModifier() : DrawModifier {
    
    override fun ContentDrawScope.draw() {
        val shape = RoundedCornerShape(20.dp)
        clip(shape)
        drawContent()
    }
}
a

Adam Powell

05/18/2020, 6:04 PM
@Nader Jawad
k

Kazemihabib1996

05/18/2020, 6:20 PM
@Vinay Gaba
Copy code
val RRectPath = Path().apply {
            addRRect(RRect(rect = Rect.fromCircle(Offset(100f, 100f), 100f),
                topLeft = Radius(10f, 10f),
                topRight = Radius(10f, 10f),
                bottomLeft = Radius(10f, 10f),
                bottomRight = Radius(10f, 10f)))
        }

        clipPath(RRectPath, ClipOp.intersect) {
            this@draw.drawContent()
        }
v

Vinay Gaba

05/18/2020, 6:21 PM
I was trying to avoid using Path to do this assuming that there was a better way to do it but maybe not 😅
😀 1
k

Kazemihabib1996

05/18/2020, 6:24 PM
Copy code
val shape = RoundedCornerShape(20.dp)
clip(shape)
Here the
clip
is a modifier not a CanvasScope function
So the other solution might be:
Copy code
fun Modifier.test(
   
): Modifier = composed {
    val shape = RoundedCornerShape(20.dp)
    clip(shape)
}
v

Vinay Gaba

05/18/2020, 6:33 PM
amazing this works @Kazemihabib1996! Wondering why what I posted above wasn’t working…
Copy code
private data class RoundedCornerClipModifier() : DrawModifier {
    override fun ContentDrawScope.draw() {
        val shape = RoundedCornerShape(20.dp)
        clip(shape)
        drawContent()
    }
}
k

Kazemihabib1996

05/18/2020, 6:52 PM
Because
Modifier.clip(shape: Shape)
is a modifier itself and just calling it in
draw
phase does nothing. it just returns an instance of
private data class SimpleDrawLayerModifier(...)
.
a

Adam Powell

05/18/2020, 6:57 PM
which kind of implies that maybe you can drop this custom modifier entirely and use the stock one 🙂
v

Vinay Gaba

05/18/2020, 7:44 PM
ah got it! This makes sense after understanding the implementation details but not so much from a API surface point of view.
n

Nader Jawad

05/18/2020, 7:46 PM
There are a few APIs that we are still working on supporting directly in the declarative API surface. If you find yourself needing something like clipRRect that aren't available, you can always use the drawCanvas call which provides a lambda with a canvas that you can drop into the lower level API.
👍🏼 1
v

Vinay Gaba

05/18/2020, 8:06 PM
That’s a fair trade-off! Thanks everyone for your prompt responses 🙏🏼
2 Views