Question

使用Javascript，我需要获取元素的变换矩阵。它可能没有任何变化，但它的父母可能会。如何获得将屏幕坐标空间映射到元素坐标空间的组合值？

<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

调用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考虑在内，因此旋转可能会导致错误的结果。

Answer 2

嗯.. Chrome似乎不支持此功能（它会返回一个合适的矩阵，但无法找到有意义的值）但对于Safari我猜你可能会这样做;

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

或者您可以按照here说明单独访问矩阵属性。

另一方面，对于Chrome和Node，似乎存在名为XCSSMatrix

的polyfill

如何获取元素的所有CSS变换的组合矩阵？

2 个答案: