Получить координаты X и Y у функции элемента > style > transform > translate

#javascript #html

Мне нужно с помощью js получить координаты X и Y у функции элемента 

> style > transform > translate

Возможно ли это сделать ? 

Если да, то как ?







    

Ответы

Ответ 1

Вот так можно получить значение в пикселях, независимо от единиц, в которых задан
трансформ. 



let img = document.querySelector('img');

// этот вызов вернет матрицу трансформации элемента в виде строки
let matrix = window.getComputedStyle(img).transform;
console.log("matrix =", matrix );

// сделаем из неё массив
matrix = matrix.split(/\(|,\s|\)/).slice(1,7);
console.log("matrix =", JSON.stringify(matrix) );

// сдвиг это 2 последних компонента этой матрицы, нужно понимать что это 
// финальный результат с учетом всех трансформаций, в данном примере это 
// те самые значения что и в свойтве transform, но все иначе если эта матрица 
// получена в результате перемножения матриц нескольких трансформаций
console.log("translate: x =", matrix[4], ",  y =", matrix[5]);

// угол можно найти по формуле, исходя их того, что
// rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
let angle = Math.asin(matrix[1]) * (180/Math.PI);
console.log("rotate:", angle, 'deg');





В более сложных случаях может помочь unmatrix