From b850af7a394275588585e0a07c30ab225e0269fe Mon Sep 17 00:00:00 2001 From: Max Graey Date: Thu, 19 Jan 2017 11:22:47 -0800 Subject: [PATCH] fix skew transformation Summary: Motivation: fix #11884 issue I will try in short to explain what was wrong. Let's look to transformation's matrix for **skewY** for example. | cos(a) | sin(a) | 0 | 0 | |:------:|:------:|:------:|:-----:| | 0 | 1 | 0 | 0 | | 0 | 0 | 1 | 0 | | tx | ty | tz | 1 || Yes, this visually produce skewing transform but it slightly incorrect. This way affects horizontal scale as well. See [this](https://github.com/facebook/react-native/issues/11884) | 1 | tan(a) | 0 | 0 | |:------:|:------:|:------:|:-----:| | 0 | 1 | 0 | 0 | | 0 | 0 | 1 | 0 | | tx | ty | tz | 1 || According to [www.w3.org/css-transforms](https://www.w3.org/TR/css-transforms-1/#SkewDefined) Only one differance React Native use **row major matrix style**, so we change ```m[0][1]``` instead ```m[1][0]```. sahrens vjeux Closes https://github.com/facebook/react-native/pull/11992 Differential Revision: D4436470 Pulled By: vjeux fbshipit-source-id: 1b433f04650bae7e06b5a93f521e49f11c70cce3 --- Libraries/Utilities/MatrixMath.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/Libraries/Utilities/MatrixMath.js b/Libraries/Utilities/MatrixMath.js index 6900106a6..c3e088751 100755 --- a/Libraries/Utilities/MatrixMath.js +++ b/Libraries/Utilities/MatrixMath.js @@ -165,13 +165,11 @@ var MatrixMath = { }, reuseSkewXCommand: function(matrixCommand, radians) { - matrixCommand[4] = Math.sin(radians); - matrixCommand[5] = Math.cos(radians); + matrixCommand[4] = Math.tan(radians); }, reuseSkewYCommand: function(matrixCommand, radians) { - matrixCommand[0] = Math.cos(radians); - matrixCommand[1] = Math.sin(radians); + matrixCommand[1] = Math.tan(radians); }, multiplyInto: function(out, a, b) {