5

Дело такое, 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 ответ 1

10

В черновике спецификации описано какие значения, что означают.

Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D) матрица 4х4

введите сюда описание изображения

Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:

введите сюда описание изображения

Как вы правильно отметили: tx, ty - отвечают за перемещение.

За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае это a,d, при это a - масштабирование по ширине, d - по высоте.

c,b - отвечают за наклон

и все вместе a,b,c,d - за поворот.

Подробнее можно увидеть на картинке

введите сюда описание изображения

Такие преобразования называются Афинными, подробнее о них можно узнать:

Wikipedia: Афинные преобразования
Аффинное преобразование и его матричное представление

5
  • Разобрался с scale, rotate и translate. Но skew не пойму как skew вытащить ?
    – Kirpich643
    8 дек 2015 в 23:04
  • @Kirpich643, на самом деле, если применено сразу несколько преобразований, то определить их весьма нетривиально, так как преобразования представляют из себя произведение матрицы на вектор или сложение матриц, и так как у нас имеется всего два состояния: начальное - фактически единичная матрица, и конечное - то весьма проблематично узнать вектора на которые мы умножали матрицу
    – Grundy
    9 дек 2015 в 6:13
  • В черновике спецификаций есть Decomposing a 2D matrix, из неё собственно и выходят scale, rotate и translate, но из неё выходят m11, m12, m21, m22 и я так понимаю это позиции в матрице, но я не понимаю зачем они и почему они не совпадают с входными ?
    – Kirpich643
    9 дек 2015 в 9:30
  • @Kirpich643, не не не, не совсем так: перечитайте еще раз ответ. Общий случай трансформаций - трехмерный, для него используется матрица 4х4, для двухмерных трансформаций, используется та же матрица 4х4, а которой стоят 0 в третьем столбце/строке везде кроме главной диагонали.
    – Grundy
    9 дек 2015 в 9:34
  • 1
    а выходят они потому, что при двухмерном преобразовании используются только две координаты, x,y
    – Grundy
    9 дек 2015 в 9:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.