Question

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

在元素应用transform:skew();后，有没有办法获得元素的高度？

e.g。如果元素的高度为100px且顶部偏移为500px预变换，则在应用了偏斜后，高度实际上可能为150px，顶部偏移实际上可能为450px，而标准高度（）和偏移量（ 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}
}

More information and explanations about bounding boxes and calculations

在使用JS / jQuery应用'skew'变换后，如何获得元素的高度/偏移量？

1 个答案: