噴氣背包中的橢圓形組成

Question

我需要在 jetpack compose 中創建一個類似於 RoundedCornerShape 的自定義形狀，結果應該如下所示：

我相信我應該像這樣擴展 Shape 接口：

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)
}

知道如何實現這一目標嗎？

Answer 1

此形狀不是橢圓形或 RoundedRect(percent=...)。 如果您知道數學表達式，則可以使用 GenericShape 創建形狀，然后使用 Modifier.clip 或 Modifier.background() 將其設置為您的形狀。 可能需要 addArc 或 quadraticBezier 來繪制

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

其他選項，可以使用 Photoshop 去除周圍的白色，將此形狀作為圖像，然后使用 Canvas 和 BlendMode 裁剪任何圖像，如果這是你需要的

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