Início / coding / Perguntas / 79377601
Accepted
user924
Asked: 2025-01-22 19:52:30 +0800 CST

Como implementar uma forma personalizada com clipe de semicírculo nas laterais com o Jetpack Compose?

  • 772

Então preciso implementar uma forma semelhante no Jetpack Compose

insira a descrição da imagem aqui

Estou tentando com o seguinte código, mas até agora sem sorte:

fun clippedCardShape(clipRadius: Float = 30f): Shape {
    return object : Shape {
        override fun createOutline(
            size: androidx.compose.ui.geometry.Size,
            layoutDirection: LayoutDirection,
            density: Density
        ): Outline {
            val path = Path().apply {
                // Top line
                lineTo(size.width, 0f)

                // Right side clipping
                lineTo(size.width, size.height / 2 - clipRadius)
                arcTo(
                    rect = Rect(
                        left = size.width - clipRadius * 2,
                        top = size.height / 2 - clipRadius,
                        right = size.width,
                        bottom = size.height / 2 + clipRadius
                    ),
                    startAngleDegrees = 270f,
                    sweepAngleDegrees = -180f,
                    forceMoveTo = false
                )

                lineTo(size.width, size.height)

                // Bottom line
                lineTo(0f, size.height)

                // Left side clipping
                lineTo(0f, size.height / 2 + clipRadius)
                arcTo(
                    rect = Rect(
                        left = 0f,
                        top = size.height / 2 - clipRadius,
                        right = clipRadius * 2,
                        bottom = size.height / 2 + clipRadius
                    ),
                    startAngleDegrees = 90f,
                    sweepAngleDegrees = 180f,
                    forceMoveTo = false
                )
                lineTo(0f, 0f)

                close()
            }
            return Outline.Generic(path)
        }
    }
}

O código tenta adicionar um recorte no meio, mas ele deve ficar quase no topo da forma, como na imagem de exemplo.

Resultado:

insira a descrição da imagem aqui

Então, eu gostaria de ver um exemplo prático de alguém que saiba como lidar com isso, para que eu possa aprender e descobrir a lógica e a matemática de como implementar formas semelhantes em casos diferentes.

Atualizar

um pequeno progresso mas ainda com problemas:

insira a descrição da imagem aqui

val clipRadius = 20f // Radius of the left and right clips
val path = Path().apply {
    // Move to the top-left corner
    moveTo(0f, 0f)
    // Top-left corner
    lineTo(0f, 0f)
    // Left clip arc
    arcTo(
        rect = Rect(
            left = 0f,
            top = (size.height / 2) - clipRadius,
            right = clipRadius * 2,
            bottom = (size.height / 2) + clipRadius
        ),
        startAngleDegrees = 270f,
        sweepAngleDegrees = 180f,
        forceMoveTo = false
    )
    // Bottom-left corner
    lineTo(0f, size.height)
    // Bottom-left to bottom-right
    lineTo(size.width, size.height)
    // Right clip arc
    arcTo(
        rect = Rect(
            left = size.width - (clipRadius * 2),
            top = (size.height / 2) - clipRadius,
            right = size.width,
            bottom = (size.height / 2) + clipRadius
        ),
        startAngleDegrees = 90f,
        sweepAngleDegrees = 180f,
        forceMoveTo = false
    )
    // Bottom-right corner
    lineTo(size.width, 0f)
    // Close the shape
    close()
}
return Outline.Generic(path)

1 respostas

  1. Best Answer

    Você pode fazer assim, usando addOval:

    @Composable
fun ClippedCardShape() {
    Scaffold { paddingValues ->
        Column(Modifier.padding(paddingValues)) {
            repeat(10) {
                Image(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(clippedCardShape()),
                    painter = painterResource(R.drawable.ic_launcher_background),
                    contentDescription = null,
                    contentScale = ContentScale.FillBounds
                )
            }
        }
    }
}

fun clippedCardShape(clipRadius: Float = 30f, clipPosition: Float = 0.2f): Shape =
    object : Shape {
        override fun createOutline(
            size: Size,
            layoutDirection: LayoutDirection,
            density: Density
        ): Outline {
            val fullPath = Path().apply {
                addRect(
                    Rect(
                        left = 0f,
                        top = 0f,
                        right = size.width,
                        bottom = size.height
                    )
                )
            }
            val path = Path().apply {
                addOval(
                    oval = Rect(
                        center = Offset(x = 0f, y = size.height * clipPosition),
                        radius = clipRadius
                    ),
                )
                addOval(
                    oval = Rect(
                        center = Offset(x = size.width, y = size.height * clipPosition),
                        radius = clipRadius
                    ),
                )
            }
            return Outline.Generic(fullPath - path)
        }
    }
    • 2

relate perguntas