喷气背包中的椭圆形组成

Question

I need to create a custom shape in jetpack compose similar to RoundedCornerShape, the result should look like this:

I believe I should extend the Shape interface like this:

class OvalCornerShape : Shape {

override fun createOutline(
    size: Size,
    layoutDirection: androidx.compose.ui.unit.LayoutDirection,
    density: Density
): Outline {
    val rect = size.toRect()

    val path = Path().apply {
        // do work here 
    }
    return Outline.Generic(path)
}

Any idea how I can achieve this ?

Answer 1

This shape is not an oval or RoundedRect(percent=...). If you know mathematical expression you can use GenericShape to create a shape then Modifier.clip or Modifier.background() to set it as your shape. Probably requires addArc or quadraticBezier to draw

val shape = GenericShape{size,layoutDirection->
    this.quadraticBezierTo()
    this.arcTo()
}

Other option, it would probably be possible with photoshop to remove surrounding white color, to get this shape as an image then use Canvas and BlendMode to crop any image if that's what you need

https://raw.githubusercontent.com/SmartToolFactory/Jetpack-Compose-Tutorials/master/screenshots/tutorial6_2.gif