javascript - 远处变换元素的宽度/高度(以像素为单位)

Question

我目前正在开发一个网络界面，该界面使用 3D 变换作为缩放方法。缩放是通过一个名为 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,
           }

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

我有什么:

• 每个元素的实际宽度/高度
• 我从中查看元素的 Z-index 中的像素数量。

我需要什么

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

如果有人知道我如何计算这个，我会喜欢一些帮助

Answer 1

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

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

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