Width/Height 以像素为单位表示远处的变换元素

Question

我目前正在开发一个使用 3D 变换作为缩放方法的 Web 界面。缩放是通过一个名为 impress.js 的 API 完成的，它简单地通过 3D 变换将相机移动得更近或更远。

问题

我需要为一堆 div 创建一个方形叠加层，因为它们可能很远，所以我需要计算它们在屏幕上实际占据的像素数量。我想既然我可以从相机当前的 div 中获得多少像素，我应该能够确定远处元素的表观像素大小。

我已经尝试用 angular 尺寸估算它，查看 here。但是，当您移动得太近、太远或物体太薄或太宽时，它就不起作用。

代码

我目前所做的看起来像这样：

    var div = $("#target"),
        camera = $("#camera"),

        angularSize = camera.z < 0 ? Math.tan(div.offsetWidth / camera.z) : 1;

    return {
             width: div.offsetWidth * angularSize,
             height: div.offsetHeight * angularSize,
           }

但它只适用于某些元素，而且也不完美。

我有：

每个元素的实际 width/height
我从中查看元素的 Z-index 中的像素数量。

我需要的

远处元素实际在我的屏幕上占据的像素数量。

如果有人知道我如何计算这个，我希望得到一些帮助

Answer 1

没关系，我意识到我把事情复杂化了，可以只使用相机的 正常视角距离 及其 当前位置 。

相机在任何移动之前的视角是 1000px，我可以随时获取相机的当前 z 位置，所以我这样做了：

    sizeScale = 1000 / camera.z;
    return {
               width: element.offsetWidth * sizeScale,
               height: element.offsetHeight * sizeScale,
           }

Width/Height 以像素为单位表示远处的变换元素

Width/Height in pixels for far away transformed elements

javascript

css

transform

pixel

impress.js