status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-25 15:45:32 +00:00
Code Issues Projects Releases Wiki Activity

fix skew transformation

Browse Source 
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
This commit is contained in:
Max Graey 2017-01-19 11:22:47 -08:00 committed by Facebook Github Bot
parent e2ce98b7c6
commit b850af7a39
1 changed files with 2 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Libraries/Utilities/MatrixMath.js
View File

@ -165,13 +165,11 @@ var MatrixMath = {
}, },
reuseSkewXCommand: function(matrixCommand, radians) { reuseSkewXCommand: function(matrixCommand, radians) {
matrixCommand[4] = Math.sin(radians); matrixCommand[4] = Math.tan(radians);
matrixCommand[5] = Math.cos(radians);
}, },
reuseSkewYCommand: function(matrixCommand, radians) { reuseSkewYCommand: function(matrixCommand, radians) {
matrixCommand[0] = Math.cos(radians); matrixCommand[1] = Math.tan(radians);
matrixCommand[1] = Math.sin(radians);
}, },
multiplyInto: function(out, a, b) { multiplyInto: function(out, a, b) {