日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Jetpack?Compose?雙指拖拽實現詳解_Android

作者：九狼 ? 更新時間： 2022-12-14 編程語言

Modifier.offset

Compose遇到一個瀏覽圖片的功能，雙指放大和縮小

Modifier的offset可以偏移內容。偏移量可以是正的，也可以是非正的。應用偏移只會更改內容的位置，而不會影響其大小測量。

offset由于用戶交互而發生變化的偏移。它避免了在偏移量發生變化時進行重新編譯，還添加了一個圖形層，以防止在偏移量發生變化時對上下文進行不必要的重畫。

graphicsLayer

使內容繪制到繪制層中的元素。繪圖層可以與父層分開失效。當內容獨立于上面的任何內容進行更新時，應使用graphicsLayer，以最小化無效內容。

graphicsLayer可以用于對內容應用各種效果

  • 縮放（scaleX、scaleY）
  • 旋轉（rotationX、rotationY、rotationZ）
  • 不透明度（alpha）
  • 陰影（shadowElevation、shape）
  • 剪裁（clip、shape）
  • 以及使用Renderefect更改層的結果。

官方說，如果提供非零陰影高程，并且傳遞的形狀為凹面，則陰影將不會在小于10的Android版本上繪制。

還有小于1.0f的alpha值會將其內容隱式剪裁到其邊界。這是因為創建了一個中間合成層，以便在使用所需的alpha將內容繪制到目標之前，先將內容渲染到first中。該層的大小與配置該修改器的可組合對象的邊界一致，這些邊界之外的內容將被忽略。

Modifier.pointerInput

用于處理修改元素區域內的指針輸入。 PointerInputScope或AwaitPointerEventScope上的擴展函數可以定義為執行更高級別的手勢檢測。指針輸入處理塊將被取消，并在指針輸入用不同的鍵1重新組合時重新啟動。

PointerInputScope.detectTransformGestures

可以用于旋轉、平移和縮放的手勢檢測器。。當發生任何旋轉、縮放或平移時，將調用OnGeture，以度為單位傳遞旋轉角度，以像素為單位放大比例因子并以偏移量平移。

邏輯解釋

定義4個變量

var angle by remember { mutableStateOf(0f) }//旋轉的角度
var zoom by remember { mutableStateOf(1f) }//縮放
var offsetX by remember { mutableStateOf(0f) }//X軸偏移量
var offsetY by remember { mutableStateOf(0f) }//X軸偏移量

offset

Modifier
    .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }

傳入graphicsLayer里面

.graphicsLayer(
    scaleX = zoom,
    scaleY = zoom,
    rotationZ = angle
)

監聽手勢

接著就是要監聽手勢，拿到手勢的滑動返回的值讓mutableStateOf告訴graphicsLayer刷新UI

.pointerInput(Unit) {
    detectTransformGestures(
        onGesture = { _, pan, gestureZoom, gestureRotate ->
            angle += gestureRotate
            zoom *= gestureZoom
            offsetX += pan.x
            offsetY += pan.y
        }
    )
}

圖片的話加個Image就可以了，我在這里用背景色代替

 background(Color.Cyan)

完整代碼

@Composable
private fun TransformGestures() {
    var angle by remember { mutableStateOf(0f) }
    var zoom by remember { mutableStateOf(1f) }
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    Box(
        Modifier
            .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
            .graphicsLayer(
                scaleX = zoom,
                scaleY = zoom,
                rotationZ = angle
            )
            .background(Color.Cyan)
            .pointerInput(Unit) {
                detectTransformGestures(
                    onGesture = { _, pan, gestureZoom, gestureRotate ->
                        angle += gestureRotate
                        zoom *= gestureZoom
                        offsetX += pan.x
                        offsetY += pan.y
                    }
                )
            }
            .fillMaxSize()
    )
}

效果圖

原文鏈接：https://juejin.cn/post/7061958970788806692

欄目分類
最近更新