android - Android Jetpack Compose:如何在“盒子”中缩放图像?
问题描述
我将在一个框内构建一个可缩放的图像视图,就像第一个屏幕截图一样。但是当我放大图像时,它会开箱即用。有没有办法缩放图像,但保持大小?没有view
or fragment
,box
似乎还不够。我期待图像变大,但仍然停留在红色框内,但放大后我得到了第二张截图。
感谢 nglauber 和 Amirhosein,我得到了最终的解决方案,即在“框”(固定区域)内同时具有缩放和拖动功能,并将以下代码作为新屏幕截图,如下所示。
val imageBitmap = imageResource(id = R.drawable.android)
Image(
modifier = Modifier
.preferredSize(400.dp, 300.dp)
.clip(RectangleShape)
.zoomable(onZoomDelta = { scale.value *= it })
.rawDragGestureFilter(
object : DragObserver {
override fun onDrag(dragDistance: Offset): Offset {
translate.value = translate.value.plus(dragDistance)
return super.onDrag(dragDistance)
}
})
.graphicsLayer(
scaleX = scale.value,
scaleY = scale.value,
translationX = translate.value.x,
translationY = translate.value.y
),
contentDescription = null,
bitmap = imageBitmap
)
解决方案
这是我的解决方案...可能对某人有帮助...
@Composable
fun ZoomableImage() {
val scale = remember { mutableStateOf(1f) }
val rotationState = remember { mutableStateOf(1f) }
Box(
modifier = Modifier
.clip(RectangleShape) // Clip the box content
.fillMaxSize() // Give the size you want...
.background(Color.Gray)
.pointerInput(Unit) {
detectTransformGestures { centroid, pan, zoom, rotation ->
scale.value *= zoom
rotationState.value += rotation
}
}
) {
Image(
modifier = Modifier
.align(Alignment.Center) // keep the image centralized into the Box
.graphicsLayer(
// adding some zoom limits (min 50%, max 200%)
scaleX = maxOf(.5f, minOf(3f, scale.value)),
scaleY = maxOf(.5f, minOf(3f, scale.value)),
rotationZ = rotationState.value
),
contentDescription = null,
painter = painterResource(R.drawable.dog)
)
}
}
推荐阅读
- django - django-rest-swagger UI 没有 POST 请求正文的表单(基于函数的视图)
- c# - 实体框架核心创建额外的表列
- java - 从 Android Studio 导入项目时出现 Intellij Idea 错误
- python-3.x - Tkinter 文本小部件插入图像
- linux - 如果前一个进程包含字符串,则在后台运行进程的 Shell 脚本解析其输出并启动服务
- php - MySQL NOW() 与 PHP 时区不匹配
- javascript - 没有流功能可以使用 node-xmpp-client 继续
- javascript - Vanilla javascript:监听类变量的变化
- c - 如何区分 fgets 达到 EOF 和达到错误
- mysql - 硬编码值工作正常,但是当从参数传递时在 i-Report 中没有给出相同的结果