famo.us是如何运作的？

Question

我试图弄清楚famo.us透视图转换是如何工作的。

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

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

这意味着图像的Transform.translate(0, 0, -50)应该使新图像小2倍，但它不！！

我在famo.us文档中没有找到有关这方面的任何信息。

有什么想法吗？

P.S:我需要计算转换距离，用图像填充屏幕宽度(而且我不想使用缩放)。

Answer 1

透视与3D空间相关，并且与像素的原点相关。首先，您应该为您的透视图使用更大的值(例如1000)。其次，使用修饰符来设置与上下文相关的曲面的翻译。正值使元素更接近观看者，负值更远。

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

示例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转换值

示例jsBin (宽度)

示例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));