JetpackCompose タップした位置に画像を表示する

JetpackComposeでタップした位置に画像を表示する方法です。

こちらの実装のアレンジになります。
タップ位置を知りたいのでdetectTapGesturesになります。

TapToPlaceImageCentered.kt

@Composable
fun TapToPlaceImageCentered() {
    val density = LocalDensity.current
    var imageOffset by remember { mutableStateOf(Offset.Zero) }
    var showImage by remember { mutableStateOf(false) }

    // dp → px に変換（画像サイズが100.dpの場合、その半分）
    val halfImageSizePx = with(density) { 50.dp.toPx() }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .pointerInput(Unit) {
                detectTapGestures { tapOffset ->
                    imageOffset = tapOffset
                    showImage = true
                }
            }
    ) {
        if (showImage) {
            Image(
                painter = painterResource(id = R.drawable.baseline_back_hand_24), // 任意の画像に変更してね
                contentDescription = null,
                modifier = Modifier
                    .size(100.dp)
                    .offset {
                        IntOffset(
                            (imageOffset.x - halfImageSizePx).toInt(),
                            (imageOffset.y - halfImageSizePx).toInt()
                        )
                    }
            )
        }
    }
}