Implementing rotateX and rotateY for Android.

felipemartim · Nov 29, 2015 · 4f47b34 · 4f47b34
1 parent 4890424
commit 4f47b34
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 3 deletions.
diff --git a/Examples/UIExplorer/TransformExample.js b/Examples/UIExplorer/TransformExample.js
@@ -179,6 +179,32 @@ var styles = StyleSheet.create({
       {scale: 2},
     ],
   },
+  box6step1: {
+    backgroundColor: 'maroon',
+    height: 50,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: 50,
+    transform: [
+      {translate: [100, 100]},
+      {rotateX: '60deg'},
+      {scale: 3},
+    ],
+  },
+  box6step2: {
+    backgroundColor: 'maroon',
+    height: 50,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: 50,
+    transform: [
+      {rotateY: '60deg'},
+      {translate: [100, 100]},
+      {scale: 3},
+    ],
+  },
   flipCardContainer: {
     marginVertical: 40,
     flex: 1,
@@ -284,5 +310,27 @@ exports.examples = [
         </View>
       );
     }
-  }
+  },
+  {
+    title: 'Translate, RotateX, Scale',
+    description: "translate: [100, 100], rotateX: '60deg', scale: 3",
+    render() {
+      return (
+        <View style={styles.container}>
+          <View style={[styles.box6step1]} />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Translate, RotateY, Scale',
+    description: "translate: [100, 100], rotateY: '60deg', scale: 3",
+    render() {
+      return (
+        <View style={styles.container}>
+          <View style={[styles.box6step2]} />
+        </View>
+      );
+    }
+  },
 ];
diff --git a/Libraries/Utilities/MatrixMath.js b/Libraries/Utilities/MatrixMath.js
@@ -464,10 +464,10 @@ var MatrixMath = {
 
       // Solve the equation by inverting perspectiveMatrix and multiplying
       // rightHandSide by the inverse.
-      var inversePerspectiveMatrix = MatrixMath.inverse3x3(
+      var inversePerspectiveMatrix = MatrixMath.inverse(
         perspectiveMatrix
       );
-      var transposedInversePerspectiveMatrix = MatrixMath.transpose4x4(
+      var transposedInversePerspectiveMatrix = MatrixMath.transpose(
         inversePerspectiveMatrix
       );
       var perspective = MatrixMath.multiplyVectorByMatrix(
@@ -582,6 +582,8 @@ var MatrixMath = {
       translation,
 
       rotate: rotationDegrees[2],
+      rotateX: rotationDegrees[0],
+      rotateY: rotationDegrees[1],
       scaleX: scale[0],
       scaleY: scale[1],
       translateX: translation[0],

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -18,6 +18,8 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
   private static final String PROP_BACKGROUND_COLOR = ViewProps.BACKGROUND_COLOR;
   private static final String PROP_DECOMPOSED_MATRIX = "decomposedMatrix";
   private static final String PROP_DECOMPOSED_MATRIX_ROTATE = "rotate";
+  private static final String PROP_DECOMPOSED_MATRIX_ROTATE_X = "rotateX";
+  private static final String PROP_DECOMPOSED_MATRIX_ROTATE_Y = "rotateY";
   private static final String PROP_DECOMPOSED_MATRIX_SCALE_X = "scaleX";
   private static final String PROP_DECOMPOSED_MATRIX_SCALE_Y = "scaleY";
   private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_X = "translateX";
@@ -144,6 +146,10 @@ private static void setTransformMatrix(View view, ReadableMap matrix) {
             (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_TRANSLATE_Y)));
     view.setRotation(
         (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_ROTATE));
+    view.setRotationX(
+        (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_ROTATE_X));
+    view.setRotationY(
+        (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_ROTATE_Y));
     view.setScaleX(
         (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_SCALE_X));
     view.setScaleY(
@@ -154,6 +160,8 @@ private static void resetTransformMatrix(View view) {
     view.setTranslationX(PixelUtil.toPixelFromDIP(0));
     view.setTranslationY(PixelUtil.toPixelFromDIP(0));
     view.setRotation(0);
+    view.setRotationX(0);
+    view.setRotationY(0);
     view.setScaleX(1);
     view.setScaleY(1);
   }