Permalink
Browse files

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](#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 #11992

Differential Revision: D4436470

Pulled By: vjeux

fbshipit-source-id: 1b433f04650bae7e06b5a93f521e49f11c70cce3
  • Loading branch information...
MaxGraey authored and facebook-github-bot committed Jan 19, 2017
1 parent e2ce98b commit b850af7a394275588585e0a07c30ab225e0269fe
Showing with 2 additions and 4 deletions.
  1. +2 −4 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) {

0 comments on commit b850af7

Please sign in to comment.