多點觸控:平移、縮放、旋轉
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
如要偵測平移、縮放及旋轉的多點觸控手勢,您可以使用 transformable
修飾符。這個修飾符本身不會轉換元素,只會偵測手勢。
@Composable
private fun TransformableSample() {
// set up all transformation states
var scale by remember { mutableStateOf(1f) }
var rotation by remember { mutableStateOf(0f) }
var offset by remember { mutableStateOf(Offset.Zero) }
val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
scale *= zoomChange
rotation += rotationChange
offset += offsetChange
}
Box(
Modifier
// apply other transformations like rotation and zoom
// on the pizza slice emoji
.graphicsLayer(
scaleX = scale,
scaleY = scale,
rotationZ = rotation,
translationX = offset.x,
translationY = offset.y
)
// add transformable to listen to multitouch transformation events
// after offset
.transformable(state = state)
.background(Color.Blue)
.fillMaxSize()
)
}
如果您需要將縮放、平移和旋轉與其他手勢合併,可以使用 PointerInputScope.detectTransformGestures
偵測工具。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 瞭解手勢
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-08-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-08-27 (世界標準時間)。"],[],[],null,["# Multitouch: Panning, zooming, rotating\n\nTo detect multitouch gestures used for panning, zooming and rotating, you can\nuse the `transformable` modifier. This modifier does not transform elements by\nitself, it only detects the gestures.\n\n\n```kotlin\n@Composable\nprivate fun TransformableSample() {\n // set up all transformation states\n var scale by remember { mutableStateOf(1f) }\n var rotation by remember { mutableStateOf(0f) }\n var offset by remember { mutableStateOf(Offset.Zero) }\n val state = rememberTransformableState { zoomChange, offsetChange, rotationChange -\u003e\n scale *= zoomChange\n rotation += rotationChange\n offset += offsetChange\n }\n Box(\n Modifier\n // apply other transformations like rotation and zoom\n // on the pizza slice emoji\n .graphicsLayer(\n scaleX = scale,\n scaleY = scale,\n rotationZ = rotation,\n translationX = offset.x,\n translationY = offset.y\n )\n // add transformable to listen to multitouch transformation events\n // after offset\n .transformable(state = state)\n .background(Color.Blue)\n .fillMaxSize()\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/gestures/GesturesSnippets.kt#L324-L352\n```\n\n\u003cbr /\u003e\n\nIf you need to combine zooming, panning and rotation with other gestures, you\ncan use the\n[`PointerInputScope.detectTransformGestures`](/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.input.pointer.PointerInputScope).detectTransformGestures(kotlin.Boolean,kotlin.Function4))\ndetector.\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Understand gestures](/develop/ui/compose/touch-input/pointer-input/understand-gestures)"]]