Jetpack 中的波浪框组合

Question

有没有办法用 Canvas 制作一个带有波浪形顶部的盒子？

想知道这个效果是不是可以直接用Canvas来实现，不需要有滚动动画

Answer 1

不太清楚你为什么要谈论 Canvas。要裁剪这样的视图，您可以使用自定义 Shape 并使用 Modifier.clip 将其应用于您的视图。您可以使用以下形状：

class WavyShape(
    private val period: Dp,
    private val amplitude: Dp,
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density,
    ) = Outline.Generic(Path().apply {
        val wavyPath = Path().apply {
            val halfPeriod = with(density) { period.toPx() } / 2
            val amplitude = with(density) { amplitude.toPx() }
            moveTo(x = -halfPeriod / 2, y = amplitude)
            repeat(ceil(size.width / halfPeriod + 1).toInt()) { i ->
                relativeQuadraticBezierTo(
                    dx1 = halfPeriod / 2,
                    dy1 = 2 * amplitude * (if (i % 2 == 0) 1 else -1),
                    dx2 = halfPeriod,
                    dy2 = 0f,
                )
            }
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
        }
        val boundsPath = Path().apply {
            addRect(Rect(offset = Offset.Zero, size = size))
        }
        op(wavyPath, boundsPath, PathOperation.Intersect)
    })
}

如果出于某种原因你真的需要在 Canvas 中使用它，你可以将我在 WavyShape 中创建的相同 Path 传递给 DrawScope.clipPath，这样clipPath 块的内容将被剪裁。

将自定义形状应用于您的 Image 或任何其他视图：

Image(
    painter = painterResource(id = R.drawable.my_image_1),
    contentDescription = null,
    contentScale = ContentScale.FillBounds,
    modifier = Modifier
        .clip(WavyShape(period = 100.dp, amplitude = 50.dp))
)

结果：

Jetpack 中的波浪框组合

Wavy box in Jetpack compose

android

android-canvas

kotlin

android-jetpack

android-jetpack-compose