web-dev-qa-db-fra.com

Obtenir la valeur d'échelle d'un élément?

Je me demande comment je peux obtenir la valeur d'échelle d'un élément?

J'ai essayé $(element).css('-webkit-transform'); qui renvoie matrix(scaleX,0,0,scaleY,0,0); Y a-t-il un moyen d'obtenir scaleX et scaleY uniquement?

javascriptjquerycss3
23
einstein

Si cela a été spécifié par une matrice, je suppose que vous ne pouvez pas le faire simplement, mais vous pouvez facilement analyser la valeur:

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] contiendra scaleX et matches[2] contiendra scaleY. S'il est possible que d'autres transformations aient également été appliquées, vous devrez légèrement ajuster la regex, car maintenant, tous les autres paramètres sont 0.

Un moyen d'obtenir uniquement les valeurs d'échelle peut être de supprimer toutes les transformations, de mesurer la largeur/hauteur calculée de l'élément, puis de les rajouter et de mesurer à nouveau. Puis divisez les nouvelles/anciennes valeurs. Je n'ai pas essayé, mais ça pourrait marcher. jQuery utilise lui-même une approche similaire pour de nombreuses mesures. Il dispose même d'une fonction non documentée $.swap() rien que pour cela.

PS: Vous utilisez aussi -o-transform-moz-transform et -ms-transform, n'est-ce pas?

22
Lea Verou

La solution la plus simple pour trouver le facteur d'échelle entre le document et un élément est la suivante:

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

Cela fonctionne car getBoundingClientRect renvoie la dimension réelle alors que offsetWidth/Height correspond à la taille non mise à l'échelle.

66
Joel Richard

Si vous devez uniquement cibler Webkit (car il s'agit d'un iPhone ou d'un iPad), le moyen le plus fiable et le plus rapide consiste à utiliser le javascript Webkit natif:

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

Vous pouvez voir une démo ici: http://jsfiddle.net/umZHA/

7
Duopixel

Trop tard pour le PO mais pourrait être utile dans le futur. Il existe un moyen simple de le faire en utilisant des scissions:

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;           
    }

Ceci est spécifique au kit Web, mais peut facilement être étendu à davantage de navigateurs modifiant la première ligne.

1
caiocpricci2

Vous pouvez utiliser les éléments suivants: 

var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").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 ")"
0
1.21 gigawatts