Compose笔记(二十三)--多点触控

这一节主要了解一下Compose中多点触控,在Jetpack Compose 中,多点触控处理需要结合Modifier和手势API来实现,一般通过组合 pointerInput、TransformableState 和 TransformModifier 来创建支持缩放、旋转和平移的组件。

一、 API

  1. PointerInput

含义:处理低级触摸事件的主要API,支持多点触控。

用法:通过pointerInput修饰符拦截和处理触摸事件。

  1. TransformableState

含义:管理变换状态(缩放、旋转、平移)的状态容器。

用法:与transformable修饰符结合,监听手势并更新变换值。

  1. TransformModifier

含义:应用变换效果(缩放、旋转、平移)的修饰符。

用法:通过graphicsLayer或transformable应用变换。
二、关键类与接口

  1. PointerInputScope

提供处理触摸事件的作用域,包含:

detectDragGestures:处理单指拖拽。

detectTransformGestures:处理双指缩放 / 旋转。

detectTapGestures:处理点击事件。

  1. TransformScope

在detectTransformGestures中提供:

panChange:平移变化量。

zoomChange:缩放变化量。

rotationChange:旋转变化量。

  1. Transformation

包含三个变换参数:

scale:缩放因子。

rotation:旋转角度。

offset:平移偏移量。

栗子:

  1. 单指拖拽
Kotlin 复制代码
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.consumeAllChanges
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.composenavigationdemo.R

@Composable
fun TestImage() {
    var offset by remember { mutableStateOf(Offset.Zero) }

    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    // 阻止事件冒泡
                    change.consumeAllChanges()
                    // 更新偏移量
                    offset = offset + dragAmount
                }
            }
            .graphicsLayer {
                translationX = offset.x
                translationY = offset.y
            }
    ) {
        Image(
            painter = painterResource(R.drawable.android),
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
    }
}
  1. 双指缩放与旋转
Kotlin 复制代码
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import com.example.composenavigationdemo.R

@Composable
fun TestImage() {
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .pointerInput(Unit) {
                detectTransformGestures { centroid, pan, zoom, rotationChange ->
                    // 更新变换参数
                    scale = (scale * zoom).coerceIn(0.5f, 5f)
                    rotation += rotationChange
                    offset = centroid
                }
            }
    ) {
        Image(
            painter = painterResource(R.drawable.android),
            contentDescription = null,
            modifier = Modifier
                .align(Alignment.Center)
                .graphicsLayer {
                    scaleX = scale
                    scaleY = scale
                    rotationZ = rotation
                    translationX = offset.x - size.width / 2
                    translationY = offset.y - size.height / 2
                }
        )
    }
}

3 组合多种手势

Kotlin 复制代码
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import com.example.composenavigationdemo.R
import kotlinx.coroutines.coroutineScope
import kotlinx.coroutines.launch

@Composable
fun TestImage() {
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    var isDragging by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .pointerInput(Unit) {
                coroutineScope {
                    launch {
                      
                        detectDragGestures(
                            onDragStart = { isDragging = true },
                            onDragEnd = { isDragging = false }
                        ) { change, dragAmount ->
                            offset += dragAmount
                        }
                    }

                    launch {
                  
                        detectTransformGestures(
                            panZoomLock = true
                        ) { _, pan, zoom, rotationChange ->
                            scale *= zoom
                            rotation += rotationChange
                            offset += pan
                        }
                    }
                }
            }
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                rotationZ = rotation
                translationX = offset.x
                translationY = offset.y
            }
    ) {
        Image(
            painter = painterResource(R.drawable.android),
            contentDescription = null,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

注意:

1 事件消费:通过change.consumeAllChanges()阻止事件冒泡。

2 坐标系转换:注意centroid(双指中心点)和offset的坐标系差异。

3 状态管理:使用remember保存变换状态,确保配置变更后状态恢复。

相关推荐
Olrookie29 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
请你喝好果汁64139 分钟前
Conda_bashrc 初始化机制学习笔记
笔记·学习·conda
alexhilton41 分钟前
理解retain{}的内部机制:Jetpack Compose中基于作用域的状态保存
android·kotlin·android jetpack
_李小白2 小时前
【Android Gradle学习笔记】第八天:NDK的使用
android·笔记·学习
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 自定义静态资源目录 笔记31
spring boot·笔记·后端·spring
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 遍历 笔记40
spring boot·笔记·thymeleaf
Chloeis Syntax3 小时前
接10月12日---队列笔记
java·数据结构·笔记·队列
QT 小鲜肉3 小时前
【个人成长笔记】Qt 中 SkipEmptyParts 编译错误解决方案及版本兼容性指南
数据库·c++·笔记·qt·学习·学习方法
Cathy Bryant4 小时前
矩阵乘以向量?向量乘以向量?
笔记·神经网络·考研·机器学习·数学建模
递归不收敛5 小时前
Conda 常用命令汇总(新手入门笔记)
笔记·conda