Дело такое, getComputedStyle(element).getPropertyValue("transform")
возвращает matrix(a, c, b, d, tx, ty)
. C translate
всё вроде бы просто: translateX = tx
, translateY = ty
. А вот как вытащить scale, rotate, skew я немного не понимаю потому как во первых в rotate и scale должны быть градусы, во вторых:
вроде как skewX = b
, skewY = c
, а scaleX = a
, scaleY = d
, но при этом что бы повернуть элемент в матрице a = cos(x)
, b = sin(x)
, c = -sin(x)
, d cos(x)
.
Вообщем из набора параметров matrix я бы ещё составил а вот из matrix вытащить параметры вообще не понимаю как. Подскажите пожалуйста как перевести матрицу в понятный простому человеку язык или подскажите как можно получить свойство transform
не в matrix
, а в scale
, rotate
, translate
, skew
?
1 ответ
В черновике спецификации описано какие значения, что означают.
Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D) матрица 4х4
Матрица, которую вы получаете matrix(a, c, b, d, tx, ty)
представляется в следующем виде:
Как вы правильно отметили: tx, ty
- отвечают за перемещение.
За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае это a,d
, при это a
- масштабирование по ширине, d
- по высоте.
c,b
- отвечают за наклон
и все вместе a,b,c,d
- за поворот.
Подробнее можно увидеть на картинке
Такие преобразования называются Афинными, подробнее о них можно узнать:
Wikipedia: Афинные преобразования
Аффинное преобразование и его матричное представление
-
Разобрался с scale, rotate и translate. Но skew не пойму как skew вытащить ? 8 дек 2015 в 23:04
-
@Kirpich643, на самом деле, если применено сразу несколько преобразований, то определить их весьма нетривиально, так как преобразования представляют из себя произведение матрицы на вектор или сложение матриц, и так как у нас имеется всего два состояния: начальное - фактически единичная матрица, и конечное - то весьма проблематично узнать вектора на которые мы умножали матрицу– Grundy ♦9 дек 2015 в 6:13
-
В черновике спецификаций есть Decomposing a 2D matrix, из неё собственно и выходят scale, rotate и translate, но из неё выходят m11, m12, m21, m22 и я так понимаю это позиции в матрице, но я не понимаю зачем они и почему они не совпадают с входными ? 9 дек 2015 в 9:30
-
@Kirpich643, не не не, не совсем так: перечитайте еще раз ответ. Общий случай трансформаций - трехмерный, для него используется матрица 4х4, для двухмерных трансформаций, используется та же матрица 4х4, а которой стоят 0 в третьем столбце/строке везде кроме главной диагонали.– Grundy ♦9 дек 2015 в 9:34
-
1а выходят они потому, что при двухмерном преобразовании используются только две координаты,
x,y
– Grundy ♦9 дек 2015 в 9:36