Canvas であそぼ

[kokoichi206]

Crop Image

Links

• How to get transparent while erasing the canvas in Jetpack Compose , now I'm getting white color?
• How to have Image zoom in Jetpack compose?

memo

alpha がいじられているもの（blendMode = Clear を含む）は、Layer がなんか特殊な扱いされるので、少し頑張る必要あるみたい？

[kokoichi206]

@Composable
fun ImageCrop() {

    Box(
        modifier = Modifier
            .fillMaxSize(),
    ) {
        Image(
            modifier = Modifier
                .fillMaxSize(),
            painter = painterResource(id = R.drawable.background),
            contentDescription = "",
        )

        Canvas(
            modifier = Modifier
                .fillMaxSize(),
        ) {
            val canvasWidth = size.width
            val canvasHeight = size.height

            with(drawContext.canvas.nativeCanvas) {
                val checkPoint = saveLayer(null, null)

                drawRect(
                    color = Color.DarkGray.copy(alpha = 0.8f),
                    size = Size(canvasWidth, canvasHeight)
                )
                drawCircle(
                    color = Color.Transparent,
                    center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),
                    radius = size.minDimension * 0.4f,
                    blendMode = BlendMode.Clear,
                )

                restoreToCount(checkPoint)
            }
        }
    }
}

[kokoichi206]

https://github.com/kokoichi206/android-app/blob/master/PlayGround/app/src/main/java/jp/mydns/kokoichi0206/playground/ImageCrop.kt

https://user-images.githubusercontent.com/52474650/202670143-abb0a666-f7cd-4caf-b75f-5d0a884441ff.mov