Question

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

问题

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

我尝试用角度大小估算它，看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,
           }

远距离变换元素的宽度/高度（以像素为单位）

1 个答案: