Làm cách nào để có được ma trận kết hợp của tất cả các biến đổi CSS của một phần tử?

Question

Sử dụng Javascript, tôi cần lấy ma trận chuyển đổi của một phần tử. Nó có thể không có bất kỳ biến đổi nào, nhưng bố mẹ nó có thể. Làm thế nào tôi có thể nhận được giá trị kết hợp ánh xạ không gian tọa độ màn hình đến không gian tọa độ của phần tử?

<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

Vâng .. có vẻ như đây không được hỗ trợ trong Chrome (nó trả về một ma trận phù hợp nhưng không thể tìm thấy các giá trị có ý nghĩa) nhưng đối với Safari tôi đoán bạn có thể làm như sau;

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

hoặc bạn có thể truy cập các thuộc tính ma trận riêng lẻ như được giải thích here.

Mặt khác dành cho Chrome và Node dường như tồn tại một polyfill gọi XCSSMatrix

Answer 2

Calling getCombinedMatrix(element) sẽ cung cấp cho bạn các ma trận kết hợp như một mảng.

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

LƯU Ý: này không lấy transformOrigin vào tài khoản, vì vậy quay có thể gây ra kết quả sai.