Pan, zoom, rotate
Use two fingers to scale and rotate; drag to pan.
var scale by remember { mutableFloatStateOf(1f) }
var rotation by remember { mutableFloatStateOf(0f) }
var offsetX by remember { mutableFloatStateOf(0f) }
var offsetY by remember { mutableFloatStateOf(0f) }
val state = rememberTransformableState { zoomChange, panChange, rotationChange ->
scale = (scale * zoomChange).coerceIn(0.5f, 4f)
rotation += rotationChange
offsetX += panChange.x
offsetY += panChange.y
}
Box(
Modifier
.graphicsLayer(
scaleX = scale,
scaleY = scale,
rotationZ = rotation,
translationX = offsetX,
translationY = offsetY
)
.transformable(state)
.size(96.dp)
.background(MaterialTheme.colorScheme.primary)
)