如何在 Jetpack Compose 中将图像平移限制在 Box 的边缘？答案

【问题标题】：How to constraint an image panning to the edges of the Box in Jetpack Compose?如何在 Jetpack Compose 中将图像平移限制在 Box 的边缘？
【发布时间】：2022-07-04 19:59:11
【问题描述】：

如何在 Compose 中限制图像平移到 Box 的边缘？

我正在使用pointerInput(Unit) { detectTransformGestures { centroid, pan, zoom, rotation -> }} 来控制缩放和平移。

当图像最小化为1f 和if (scale.value == 1f) 0f else panOffsetX 时，我正在解决这个平移问题。我想对放大的图像做同样的事情 (1f

Box(
    modifier = Modifier
        .clip(RectangleShape)
        .fillMaxWidth()
        .background(Color.Gray)
        .pointerInput(Unit) {
            detectTransformGestures { centroid, pan, zoom, rotation ->
                val constraintZoom = when {
                    scale.value > 3f -> 3f
                    scale.value < 1f -> 1f
                    else -> (scale.value * zoom)
                }
                scale.value = constraintZoom
                panOffset += pan
                panOffsetX += pan.x
                panOffsetY += pan.y
                centroidOffset = centroid
                rotationState.value += rotation
            }
        }
) {
    Image(
        modifier = Modifier
            .align(Alignment.Center)
            .graphicsLayer(
                scaleX = maxOf(1f, minOf(3f, scale.value)),
                scaleY = maxOf(1f, minOf(3f, scale.value)),
                translationX = if (scale.value == 1f) 0f else panOffsetX,
                translationY = if (scale.value == 1f) 0f else panOffsetY,
            ),
        contentDescription = null,
        painter = painterResource(R.drawable.my_sample_image)
    )
}

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

技巧是使用您的 Compoasble 大小和缩放级别来限制它

val maxX = (size.width * (zoom - 1) / 2f)
val maxY = (size.height * (zoom - 1) / 2f)

offset = newOffset
offset = Offset(
    newOffset.x.coerceIn(-maxX, maxX),
    newOffset.y.coerceIn(-maxY, maxY)

全面实施

国家

var zoom by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }
var size by remember { mutableStateOf(IntSize.Zero) }

修饰符

val imageModifier = Modifier
        .fillMaxSize()
        .aspectRatio(4/3f)
        .clipToBounds()
        .pointerInput(Unit) {
            detectTransformGestures(
                onGesture = { _, gesturePan, gestureZoom, _ ->


                    val newScale = (zoom * gestureZoom).coerceIn(1f, 3f)
                    val newOffset = offset + gesturePan
                    zoom = newScale


                val maxX = (size.width * (zoom - 1) / 2f)
                val maxY = (size.height * (zoom - 1) / 2f)

                offset = newOffset
                offset = Offset(
                    newOffset.x.coerceIn(-maxX, maxX),
                    newOffset.y.coerceIn(-maxY, maxY)
                )
                }
            )
        }
        .onSizeChanged {
            size = it
        }
        .graphicsLayer {
            translationX = offset.x
            translationY = offset.y
            scaleX = zoom
            scaleY = zoom
        }

【讨论】：