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

Width/Height in pixels for far away transformed elements

本文关键字：像素 为单位 高度 元素 变换 远距离      更新时间：2023-09-26

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

问题

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

我试着用角度大小来估计它，看看这里。然而，当你移动得太近、太远或物体太薄或太宽时，它就不起作用了。

代码

我现在做的事情看起来像这样：

    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索引中的像素数量，我正在从中查看我的元素

我需要什么

  • 远元素在我的屏幕上实际占用的像素量

如果有人知道我如何计算，我会很乐意帮助

没关系，我意识到我把事情搞得太复杂了，只能使用相机的正常视图距离和当前位置。

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

    sizeScale = 1000 / camera.z;
    return {
               width: element.offsetWidth * sizeScale,
               height: element.offsetHeight * sizeScale,
           }
相关文章：