CSS Преобразовать Матрицу в пиксель - PullRequest
Новая
       6

CSS Преобразовать Матрицу в пиксель

0 голосов
/ 20 декабря 2018

Я использую матрицу преобразования CSS как transform: matrix(1.15782, 0, 0, 1.15782, -82.5232, -137.397); для масштабирования и перемещения элемента.Я хотел бы получить фактическое количество пикселей, в которое был переведен элемент.

Если я использую 

`const style = getComputedStyle(element);
  const matrix = new WebKitCSSMatrix(style.webkitTransform);
  return {left: matrix.m41, top: matrix.m42};`

, я получаю значения как {left: -82.5232, top: -137.397}, но я хотел бы преобразовать это для получения фактических значений px.

Возможно ли это или есть?любой другой способ получить левую и верхнюю часть элемента.Я пытался offsetTop & offsetLeft, но бесполезно.

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Похоже, мне просто нужно использовать свойства scale и translate, чтобы получить действительные пиксели, как показано ниже. 

const style = getComputedStyle(element);
const matrix = new WebKitCSSMatrix(style.webkitTransform);
const scale = matrix.m11;
return {left: matrix.m41*scale, top: matrix.m42*scale};
0 голосов
/ 20 декабря 2018

Используйте matrix.m42 / element.offsetTop вверху и matrix.m41 / element.offsetLeft слева 

var element=document.getElementsByClassName("changed")[0];
const style = getComputedStyle(element);
const matrix = new WebKitCSSMatrix(style.webkitTransform);

var leftElem = matrix.m41 / element.offsetLeft;
var topElem = matrix.m42 / element.offsetTop;
console.log(leftElem +'px , top:' +topElem + 'px');
.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
<div class="changed">Changed</div>
...