android - Jetpack compose 中的波浪盒
解决方案
目前还不太清楚你为什么在谈论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
出于某种原因确实需要在内部使用它,可以将Path
我在内部创建的相同传递WavyShape
给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))
)
结果:
推荐阅读
- javascript - 在“If; else”条件下设置两个可观察对象(Angular 7+)
- ruby-on-rails - 通过 id 将用户关联到模型
- mysql - 使用带有 mySQL IN() 函数的数字
- javascript - 如何为按钮创建自动点击?//JS
- html - Html 输入文件:如何更改默认窗口标题?
- stripe-payments - 无法获取 Stripe Checkout 会话对象
- sql - 如果列包含特定值,则从结果中排除值
- javascript - 在 debounce 函数中声明 args 和 context 有什么意义
- python - python:__file__的用法
- c++ - 这个 if 语句块有什么问题?