如何创建一个形状并在表面的特定位置更改其 alpha？

Question

假设我有一个表面，我的背景颜色是红色；

Surface(modifier = Modifier.fillMaxSize().alpha(0.1f)){}

我如何在像孔一样的表面上创建一个形状（例如：矩形），以便我可以看到背景颜色不是 alpha 0.1f，而是来自这个矩形形状内部的 alpha 1.0f？

我想在我的应用程序中使用教程屏幕，除了我的示例之外，我对任何想法都持开放态度。

我的目标示例； https://id.pinterest.com/pin/353814114449134862/

Answer 1

满足你需求的各种素材，其实都在这个项目中。您可以选择使用和检查代码。

Library

Answer 2

我实现了一个示例，可以在您的实现中为您提供 kick-off：

@Composable
fun CanvasWithHole(
    holeXPosition: Float,
    holeYPosition: Float,
    holeRadius: Float
) {
    androidx.compose.foundation.Canvas(
        modifier = Modifier.fillMaxSize(),
        onDraw = {
            drawIntoCanvas { canvas ->
                val w = drawContext.size.width
                val h = drawContext.size.height
                drawImageWithHole(
                    canvas.nativeCanvas,
                    w, h, holeXPosition, holeYPosition, holeRadius,
                )
            }
        }
    )
}

fun drawImageWithHole(
    canvas: Canvas,
    w: Float,
    h: Float,
    holeXPosition: Float,
    holeYPosition: Float,
    holeRadius: Float
) {
    val bitmap = Bitmap.createBitmap(
        w.toInt(), h.toInt(), Bitmap.Config.ARGB_8888
    ).apply {
        eraseColor(Color.TRANSPARENT)
    }
    val canvasBitmap = Canvas(bitmap)
    val eraser = Paint().apply {
        color = Color.TRANSPARENT
        xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
    }
    canvasBitmap.drawColor(Color.parseColor("#cc328fa8"))
    canvasBitmap.drawCircle(holeXPosition, holeYPosition, holeRadius, eraser)

    canvas.drawBitmap(bitmap, 0f, 0f, null)
}

以下是您的使用方法：

@Composable
fun MyScreen() {
    Box {
        ContentScreen()
        CanvasWithHole(
            100f,
            100f,
            400f,
        )
    }
}

结果如下：

如何创建一个形状并在表面的特定位置更改其 alpha？

How can I create a shape and change its alpha in a specific place on a surface?

android

kotlin

android-jetpack-compose