在使用 JS/jQuery 应用“倾斜”变换后，如何获取元素的高度/偏移量？

Question

很简单，我的问题是标题：

有什么办法可以在元素经过transform:skew();后获取它的高度吗transform:skew(); 适用于它？

例如，如果一个元素的高度是 100px 并且顶部偏移是 500px 预变换，在对其应用倾斜之后，高度实际上可能是 150px 而顶部偏移实际上可能是 450px，但是标准的 height() 和偏移jQuery 中的 () 方法仍然报告原始值。

有什么解决方法吗？

提前致谢。

Answer 1

正如上面的评论中提到的，高度和宽度的值没有改变，因为它们基于没有样式的 DOM 元素。 但是我注意到 offset() 方法从转换后的元素（Chrome 23 和 Firefox 16 OSX）返回正确的值。

为了给你一个解决方案 - 对于 2d 变换，如倾斜和旋转，我对变换进行了基本的数学运算，以下函数返回基于元素变换矩阵的宽度和高度值。 这适用于我尝试过的所有 2d 转换、旋转/倾斜以及两者的组合（同样，在 Chrome 23 和 Firefox 16 OSX 上）。

function getBoundingBox(element){
    // Get the transformation matrix as a string
    var tm = element.css('transform');

    // Transform the string to an array
    var regexp = /-?\d+[\.\d]*/g;
    tm = tm.match(regexp);

    // Get the size of the object and calculate the bounding box
    var h = element.height();
    var w = element.width();
    var th = Math.abs(h * tm[0]) + Math.abs(w * tm[1]);
    var tw = Math.abs(h * tm[2]) + Math.abs(w * tm[3]);

    return {'height':th,'width':tw}
}

有关边界框和计算的更多信息和说明