Блог

Мне интересно, как я могу получить масштабное значение элемента?

Я пробовал, $(element).css('-webkit-transform'); который возвращает matrix(scaleX,0,0,scaleY,0,0); Есть ли способ получить scaleX и scaleY только?

Самым простым решением для определения масштабного коэффициента между документом и элементом является следующее:

 var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
  

Это работает, потому что getBoundingClientRect возвращает фактический размер, в то время как offsetWidth / Height — это немасштабированный размер.

Если оно было задано матрицей, я думаю, вы не сможете простым способом, но вы можете легко проанализировать значение:

 var matrixRegex = /matrix((-?d*.?d ),s*0,s*0,s*(-?d*.?d ),s*0,s*0)/,
    matches = $(element).css('-webkit-transform').match(matrixRegex);
  

matches[1] будет содержать scaleX и matches[2] будет содержать scaleY. Если возможно, что были применены и другие преобразования, вам нужно было бы слегка подправить регулярное выражение, потому что теперь предполагается, что все остальные параметры равны 0.

Способ просто получить значения масштаба может заключаться в удалении любых преобразований, измерении вычисленной ширины / высоты элемента, а затем добавлении их обратно и повторном измерении. Затем разделите новые / старые значения. Не пробовал, но это может сработать. Сам jQuery использует аналогичный подход для многих измерений, у него даже есть недокументированная $.swap() функция только для этого.

PS: Вы тоже используете -o-transform -moz-transform и -ms-transform , верно?

Если вам нужно настроить таргетинг только на webkit (поскольку он предназначен для iPhone или iPad), то наиболее надежным и быстрым способом является использование встроенного javascript, предоставляемого webkit:

 node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix
  

Вы можете просмотреть демонстрацию здесь:
http://jsfiddle.net/umZHA /

Вы могли бы использовать следующее:

 var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]); 
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
  

Слишком поздно для операции, но может быть полезно в будущем. Есть простой способ сделать это с помощью разбиений:

 function getTransformValue(element,property){       
        var values = element[0].style.webkitTransform.split(")");
        for (var key in values){
            var val = values[key];              
            var prop = val.split("(");          
            if (prop[0].trim() == property)
                return prop[1];
        }                   
        return false;           
    }
  

Это специфично для webkit, но может быть легко расширено для большего количества браузеров, модифицирующих первую строку.

Более надежный и универсальный способ получения масштаба :

 const { width, height } = element.getBoundingClientRect()
const scale = { x : element.offsetWidth / width, y : element.offsetHeight / height }
  

Он сравнивает визуальные размеры с немасштабированными размерами. Таким образом, это будет работать даже с вложенными масштабируемыми элементами.

Используя регулярное выражение

 element.style.transform.match(/scale(([1-9.]))/)[1]