famo.us 透视如何工作？

Question

我正在尝试了解 famo.us 透视变换的工作原理。

我假设famo.us使用单点透视，这意味着新图像只是平面（一些具有不同z坐标的平面）与从焦点到原始图像的线的交点。

我还假设声明 context.setPerspective(100) 设置了焦点到原始图像（屏幕）的距离。

这意味着图像的 Transform.translate(0, 0, -50) 应该使新图像小 2 倍，但事实并非如此！！

我在 famo.us 文档中没有找到任何关于此的信息。

有什么想法吗？
P.S：我需要计算平移距离以用图像填充屏幕宽度（而且我不想使用比例尺）。

Answer 1

透视与 3D space 相关，并且相对于以像素为单位的原点。首先，您应该为您的观点使用更大的值（比如 1000）。其次，使用修饰符设置表面相对于上下文的平移。正值使元素更靠近观察者，负值则更远。

注意：将您的 translateZ 值移动一半不会改变您的表面大小！从您的角度来看，它只会沿着原点轴将其移动得更近或更远。运行下面的示例并将翻译更改为 -1000，您将看到。

Example jsBin

  var mainContext = Engine.createContext();
  var contextPerspective = 1000;
  mainContext.setPerspective(contextPerspective);

  var surface = new Surface({ 
    content: 'Background',
    transform: Transform.translate(0, 0, 0.002),
    properties: {
      backgroundColor: 'rgba(0,0,0,0.1)'
    }
  });

  var surfacemod = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

  mainContext.add(surfacemod).add(surface);

  surfacemod.setTransform(Transform.translate(0, 0, -500));

编辑：根据上下文的宽度查找 z 变换值

Example jsBin（宽度）

Example jsBin（图像宽度或高度基于上下文大小）

  var surfacemod = new Modifier({
    size: [200, 100],
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });


var contextSize = mainContext.getSize();
var surfaceSize = surface.getSize();
var percentage = (contextSize[0]- surfaceSize[0]) / contextSize[0];
var transZ = contextPerspective * percentage;

surfacemod.setTransform(Transform.translate(0, 0, transZ));

famo.us 透视如何工作？

how does famo.us perpective work?

famo.us

编辑：根据上下文的宽度查找 z 变换值