Fix perspective transform usage

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt

@@ -26,6 +26,7 @@ val MainScreen = Screen.Selection(
     Screen.Example("TextDirection") { TextDirection() },
     Screen.Example("FontFamilies") { FontFamilies() },
     Screen.Example("LottieAnimation") { LottieAnimation() },
+    Screen.Example("GraphicsLayerSettings") { GraphicsLayerSettings() },
     LazyLayouts,
 )
 

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/GraphicsLayerSettings.kt

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.mpp.demo
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Slider
+import androidx.compose.material.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.DefaultCameraDistance
+import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.pointerHoverIcon
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import kotlin.math.round
+import kotlin.math.roundToInt
+
+@Composable
+fun GraphicsLayerSettings() {
+    var scaleX by remember { mutableStateOf(1f) }
+    var scaleY by remember { mutableStateOf(1f) }
+    var translationX by remember { mutableStateOf(0f) }
+    var translationY by remember { mutableStateOf(0f) }
+    var rotationX by remember { mutableStateOf(0f) }
+    var rotationY by remember { mutableStateOf(0f) }
+    var rotationZ by remember { mutableStateOf(0f) }
+    var cameraDistance by remember { mutableStateOf(DefaultCameraDistance) }
+    var originX by remember { mutableStateOf(0.5f) }
+    var originY by remember { mutableStateOf(0.5f) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(20.dp)
+    ) {
+        Box(
+            Modifier
+                .graphicsLayer(
+                    scaleX = scaleX,
+                    scaleY = scaleY,
+                    translationX = translationX,
+                    translationY = translationY,
+                    rotationX = rotationX,
+                    rotationY = rotationY,
+                    rotationZ = rotationZ,
+                    cameraDistance = cameraDistance,
+                    transformOrigin = TransformOrigin(originX, originY),
+                )
+                .align(CenterHorizontally)
+                .size(200.dp)
+                .background(MaterialTheme.colors.secondary)
+                .pointerHoverIcon(PointerIcon.Hand)
+        ) {
+            Box(
+                modifier = Modifier
+                    .offset(10.dp, 10.dp)
+                    .size(80.dp)
+                    .background(MaterialTheme.colors.primary)
+                    .pointerHoverIcon(PointerIcon.Crosshair)
+            )
+        }
+
+        Spacer(Modifier.height(20.dp))
+        SliderSetting("ScaleX", scaleX, 0.5f..2f) { scaleX = it }
+        SliderSetting("ScaleY", scaleY, 0.5f..2f) { scaleY = it }
+        SliderSetting("TranslationX", translationX, -250f..250f) { translationX = it }
+        SliderSetting("TranslationY", translationY, -250f..250f) { translationY = it }
+        SliderSetting("RotateX", rotationX, -180f..180f) { rotationX = it }
+        SliderSetting("RotateY", rotationY, -180f..180f) { rotationY = it }
+        SliderSetting("RotateZ", rotationZ, -180f..180f) { rotationZ = it }
+        SliderSetting("OriginX", originX, 0f..1f) { originX = it }
+        SliderSetting("OriginY", originY, 0f..1f) { originY = it }
+        SliderSetting("CameraDistance", cameraDistance, 3f..30f) { cameraDistance = it }
+    }
+}
+
+@Composable
+private fun SliderSetting(text: String,
+    value: Float,
+    range: ClosedFloatingPointRange<Float>,
+    onValueChange: (Float) -> Unit) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.height(30.dp)
+    ) {
+        Text(
+            text = text,
+            modifier = Modifier.width(120.dp)
+        )
+        Text(
+            text = "${round(value * 10f) / 10f}",
+            fontFamily = FontFamily.Monospace,
+            maxLines = 1,
+            overflow = TextOverflow.Clip,
+            modifier = Modifier.width(50.dp)
+        )
+        var steps = ((range.endInclusive - range.start) / 0.1f).roundToInt()
+        if (steps > 100) steps /= 10
+        if (steps > 100) steps /= 10
+        Slider(
+            value = value,
+            onValueChange,
+            valueRange = range,
+            steps = steps - 1
+        )
+    }
+}

compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt

@@ -23,6 +23,7 @@ import androidx.compose.ui.graphics.Canvas
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.node.OwnedLayer
 import androidx.compose.ui.unit.*
+import kotlin.math.abs
 import kotlin.math.max
 import org.jetbrains.skia.*
 
@@ -40,8 +41,7 @@ internal class SkiaLayer(
     internal val matrix = Matrix()
     private val inverseMatrix: Matrix
         get() = Matrix().apply {
-            setFrom(matrix)
-            invert()
+            matrix.invertTo(this)
         }
 
     private val pictureRecorder = PictureRecorder()
@@ -179,15 +179,28 @@ internal class SkiaLayer(
             rotateX(rotationX)
             scale(scaleX, scaleY)
         }
-        matrix *= Matrix().apply {
-            // the camera location is passed in inches, set in pt
-            val depth = cameraDistance * 72f
-            set(row = 2, column = 3, v = -1f / depth)
-            set(row = 2, column = 2, v = 0f)
+        // Perspective transform should be applied only in case of rotations to avoid
+        // multiply application in hierarchies.
+        // See Android's frameworks/base/libs/hwui/RenderProperties.cpp for reference
+        if (!rotationX.isZero() || !rotationY.isZero()) {
+            matrix *= Matrix().apply {
+                // The camera location is passed in inches, set in pt
+                val depth = cameraDistance * 72f
+                this[2, 3] = -1f / depth
+            }
         }
         matrix *= Matrix().apply {
             translate(x = pivotX + translationX, y = pivotY + translationY)
         }
+
+        // Third column and row are irrelevant for 2D space.
+        // Zeroing required to get correct inverse transformation matrix.
+        matrix[2, 0] = 0f
+        matrix[2, 1] = 0f
+        matrix[2, 3] = 0f
+        matrix[0, 2] = 0f
+        matrix[1, 2] = 0f
+        matrix[3, 2] = 0f
     }
 
     override fun invalidate() {
@@ -307,3 +320,7 @@ internal class SkiaLayer(
         )
     }
 }
+
+// Copy from Android's frameworks/base/libs/hwui/utils/MathUtils.h
+private const val NON_ZERO_EPSILON = 0.001f
+private inline fun Float.isZero(): Boolean = abs(this) <= NON_ZERO_EPSILON