Bir öğenin tüm CSS dönüşümlerinin birleştirilmiş matrisini nasıl alabilirim?

Question

Javascript kullanarak, bir öğenin dönüştürme matrisini almam gerekir. Herhangi bir dönüşüm olmaz, ancak ebeveynleri olabilir. Ekran koordinat alanını öğenin koordinat alanına eşleyen birleşik değeri nasıl alabilirim?

<div style="transform:scale(3.0)"> 
    <div style="transform:scale(0.5)"> 
     <h1 id="fubar">What is my scale?</h1> 
    </div> 
</div> 
<script> 
    var a = document.querySelector("#fubar"); 

    // chrome: displays "none". 
    // firefox: displays "matrix(1.5, 0, 0, 1.5, 0, 0)" 
    // I need to get the firefox value in all browsers 
    alert(window.getComputedStyle(a).transform); 
</script> 

Answer 1

Eh .. bu Chrome'da desteklenmiyor (bu uygun bir matris verir ama anlamlı değerler bulamadım) ama Safari için ben aşağıdaki gibi yapabilirsiniz tahmin görünüyor; here açıklandığı üzere

var style = window.getComputedStyle(document.getElementById("fubar")), 
    matrix = new WebKitCSSMatrix(style.webkitTransform); 
console.log(matrix.toString()); 

veya ayrı ayrı matris özelliklerini erişebilirsiniz. Chrome ve Düğüm için Öte yandan

size bir dizi olarak kombine matris verecek getCombinedMatrix(element) çağrılması XCSSMatrix

Answer 2

adında bir polyfill var gibi görünmektedir.

function getCombinedMatrix(element) { 
    var matrix = getMatrixOfElement(element); 
    var node = element.parentNode; 

    while(node && node instanceof Element) { // traverse dom tree 
     var node_matrix = getMatrixOfElement(node); 
     prependMatrix(matrix,node_matrix); // prepend matrix of parent node 

     node = node.parentNode; 
    } 

    return matrix; 
} 

function getMatrixOfElement(element) { 
    var matrix = [1,0,0,1,0,0]; // default matrix (no transforms) 
    var raw_transform = window.getComputedStyle(element).transform; 

    if (raw_transform && raw_transform !== 'none') { 
       // remove string wrapper 'matrix(' and split into parts  
     var parts = raw_transform.slice(7,-1).split(','); 
     for(var i=0;i<parts.length;i++) { 
      matrix[i] = parseFloat(parts[i]); // put string parts into matrix as float 
     } 
    } 

    return matrix; 
} 

function prependMatrix(m1,m2) { 
    // matrix multiplication 
    var a1 = m1[0]; 
    var c1 = m1[2]; 
    var tx1 = m1[4]; 

    m1[0] = m2[0]*a1+m2[2]*m1[1]; 
    m1[1] = m2[1]*a1+m2[3]*m1[1]; 
    m1[2] = m2[0]*c1+m2[2]*m1[3]; 
    m1[3] = m2[1]*c1+m2[3]*m1[3]; 
    m1[4] = m2[0]*tx1+m2[2]*m1[5]+m2[4]; 
    m1[5] = m2[1]*tx1+m2[3]*m1[5]+m2[5]; 
} 

NOT: rotasyonlar yanlış sonuçlara neden olabilir bu yüzden Bu, dikkate transformOrigin almaz.