मैं तत्व के सभी सीएसएस ट्रांसफॉर्म के संयुक्त मैट्रिक्स कैसे प्राप्त कर सकता हूं?

Question

जावास्क्रिप्ट का उपयोग करके, मुझे किसी तत्व के रूपांतरण मैट्रिक्स को प्राप्त करने की आवश्यकता है। इसमें कोई परिवर्तन नहीं हो सकता है, लेकिन इसके माता-पिता शायद हो सकते हैं। मैं संयुक्त मूल्य कैसे प्राप्त कर सकता हूं जो स्क्रीन समन्वय स्थान को तत्व समन्वय स्थान पर मानचित्रित करता है?

<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

खैर .. यह इस क्रोम में समर्थित नहीं है (यह एक उचित मैट्रिक्स रिटर्न लेकिन मूल्यों सार्थक नहीं पा सके), लेकिन सफारी के लिए मैं तुम्हें इस प्रकार कर सकते हैं लगता है कि लगता है,

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

या आप मैट्रिक्स गुण व्यक्तिगत रूप से उपयोग कर सकते हैं के रूप में समझाया here।

क्रोम और नोड के लिए दूसरी ओर वहाँ एक polyfill XCSSMatrix

Answer 2

बुलाया कॉलिंग getCombinedMatrix(element) आप एक सरणी के रूप में संयुक्त मैट्रिक्स दे देंगे मौजूद रही दिखती है।

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

नोट: यह नहीं, खाते में transformOrigin ले करता है तो रोटेशन गलत परिणाम कारण हो सकता है।