Comments (2)
Made some experiments. Sample code:
@Composable
fun example0() {
val (r, setR) = remember { mutableStateOf(true) }
val rot = when (r) {
true -> 45f
false -> 0f
}
Box(Modifier.padding(100.dp).size(50.dp).graphicsLayer(rotationX = rot, rotationY = rot).background(Color.Green).clickable {
setR(!r)
}) {
Text("R")
}
}
Android:
Desktop (perspective-ish but still differs):
It's achieved with the following patch, inspired by the link from the description of this ticket:
Index: compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt b/compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt
--- a/compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt (revision f4b9436637e0391351984ebfa5470ff77051815e)
+++ b/compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/platform/SkiaLayer.skiko.kt (date 1651230735840)
@@ -24,6 +24,7 @@
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.ClipOp
import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.DefaultCameraDistance
import androidx.compose.ui.graphics.DefaultShadowColor
import androidx.compose.ui.graphics.Matrix
import androidx.compose.ui.graphics.Outline
@@ -205,6 +206,12 @@
rotateZ(rotationZ)
scale(scaleX, scaleY)
}
+
+ val depth = DefaultCameraDistance * 42 // todo: use cameraDistance passed in graphicsLayer (#1129)
+
+ matrix *= Matrix().apply {
+ set(2, 3, -1f / depth)
+ }
matrix *= Matrix().apply {
translate(x = pivotX, y = pivotY)
}
However, I couldn't find the depth that will make the image equal to the Android version, so probably more complex change is needed.
Also, there is some code from https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/opengl-perspective-projection-matrix, probably it can help somehow.
val angleOfView = 90f
val near = 0.1f
val far = 100f
val imageAspectRatio = size.width.toFloat() / size.height
val n = near
val f = far
// gluPerspective
val scale = tan(angleOfView * 0.5f * PI.toFloat() / 180f) * n
val r = imageAspectRatio * scale
val l = -r
val t = scale
val b = -t
// gluPerspective
// glFrustum
val m = Matrix(
floatArrayOf(
2 * n / (r - l),
0f,
0f,
0f,
0f,
2 * n / (t - b),
0f,
0f,
(r + l) / (r - l),
(t + b) / (t - b),
-(f + n) / (f - n),
-1f,
0f,
0f,
-2 * f * n / (f - n),
0f,
)
)
// glFrustum
from compose-multiplatform.
I also found it not working correctly.
I tried to achieve an effect like this:
https://codepen.io/iremlopsum/pen/WzKBpE
But the result of my code is somehow random and unexpected.
Sometimes negative values are treated the same way as positive, sometimes it works.
Really strange behaviour.
val offset = remember { mutableStateOf(Offset.Zero) }
val size = remember { mutableStateOf(IntSize.Zero) }
val rotationX = if (offset.value == Offset.Zero)
0f
else
((offset.value.y / size.value.height) - 0.5f) * 90
val rotationY = if (offset.value == Offset.Zero)
0f
else
((offset.value.x / size.value.width) - 0.5f) * 90
Box(
modifier = Modifier
.graphicsLayer(
rotationX = rotationX,
rotationY = rotationY
)
.pointerMoveFilter(
onExit = {
offset.value = Offset.Zero
return@pointerMoveFilter true
},
onMove = {
offset.value = it
return@pointerMoveFilter true
}
)
.onSizeChanged {
size.value = it
}
) {
// The content
}
}
}
from compose-multiplatform.
Related Issues (20)
- TextField cannot input in ExposedDropdownMenuBox, when ExposedDropdownMenu is expanded HOT 4
- 🚀 Low-code tools to speed up and ease app development HOT 1
- java.lang.SecurityException: SHA-256 digest error for org/bouncycastle/operator/OperatorCreationException.class HOT 2
- [IOS-Simulator] TextField Text Cursor Jumps Around After Using CMD+A then Delete to clear all text preventing further text input.
- Using `ComposeScene`s with anything but `MainUIDispatcher` results in a deadlock HOT 19
- Generate XCFramework with UI, resources and dependencies HOT 2
- Remove compose ui fallback from LocalViewModelStoreOwner HOT 3
- Kotlin/Wasm responsive layout HOT 7
- Support text hyphenation HOT 1
- How to monitor finger position like touch_down\touch_move on Android platform?
- Brush.linearGradient don't work HOT 1
- Order of accessibility nodes is wrong HOT 1
- When targeting Android for a KMP project using `Coil 3.0.0-alpha06`, attempting to use `.toBitmap()` and `.asComposeImageBitmap()` results in `Unresolved reference` HOT 2
- Consider removing `Unconfined` dispatcher as default `CoroutineContext` for `ComposeScene` creation HOT 1
- Consider adding a boolean to disable `GlobalSnapshotManager.ensureStarted()` call during scene creation
- PressInteraction.Cancel is sent on mouse press and drag outside surface HOT 1
- Are there any good suggestions about using compose to generate UI through drag and drop and output the code to the local? HOT 5
- Erratic window focus behavior HOT 1
- `delay` is not respected with `runComposeUiTest` HOT 1
- compile WasmJs FAILED HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from compose-multiplatform.