I want to draw a Text such that its top looks like its "falling into" the screen. So skewed such tha...

# compose

[Travis Griggs]

I want to draw a Text such that its top looks like its "falling into" the screen. So skewed such that the top of the text is less wide than the baseline. I think this is an orthgraphic projection? Is there a way to pull this off in Compose (willing to use the native android stuff). I've played around with the graphicsLayer modifers, but nothing gets this particular transformation, it scales/translates/rotates all of the pixels uniformly, and i want something that can applies more or less transform based on whether the pixel is at

[Stylianos Gakis]

A matrix transform?
https://medium.com/a-problem-like-maria/understanding-android-matrix-transformations-25e028f56dc7 Like skewing here makes me feel like you can do it only on the top part of it

[Travis Griggs]

notice how in none of these examples do you get the orthographic (am i using the right term here?) change? If there was one where the droid was fatter at his feet and skinny at the head (like a trapezoid), then that would be what I was looking for

[Stylianos Gakis]

Yup, can’t find anything around this. Even dropping down to providing a Matrix with a float array you don’t get such controls. I am really inexperienced in doing this kind of stuff but with what I found so far I don’t see a way to do this.
I may be approaching it wrong

[romainguy]

It's not an orthographic transform. You can achieve this using a rotation around the X axis

[romainguy]

See https://developer.android.com/develop/ui/compose/graphics/draw/modifiers#graphics-modifier-rotate

[Stylianos Gakis]

Would you look at that! It does get super squished this way if you want the trapezoid to be very pronounced.
Like

@Preview
@Composable
private fun Preview() {
  HedvigTheme {
    Text(
      "Text",
      Modifier
        .fillMaxSize()
        .wrapContentSize()
        .graphicsLayer {
          rotationX = 70f
        }
        .debugBorder(),
      style = MaterialTheme.typography.headlineMedium,
    )
  }
}

Gives:

[Stylianos Gakis]

Adding a scaleY = 2f along with it makes it look close enough to the original size but with the effect you want, that’s pretty cool. Of course this will now draw a bit out of bounds and it might overlap other things but oh well. Second pic has the original bounds too

[Travis Griggs]

i had just come over here to say I found this! you guys have great minds. for a moment, just for a moment, i lined up for once. it was like a great mind eclipse. i'll go back to struggling now. 😄

[Travis Griggs]

This along with the other bit about alpha blending, I was able to get the "wheel" effect I was looking for: