Question

我试图找出如何运作famo.us透视转换。

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

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

这意味着图片的Transform.translate(0, 0, -50)应该会使新图片缩小2倍但是它并没有!!

我在famo.us docs中找不到任何关于此的信息。

任何想法？
P.S：我需要计算平移距离以用图像填充屏幕宽度（我不想使用比例）。

Answer 1

透视与3D空间相关，并且与像素中的原点相关。首先，你应该为你的观点使用更大的值（比如说1000）。其次，使用修改器设置表面相对于上下文的平移。正值使元素更接近观察者，负值更远。

注意：将您的translateZ值移动一半不会改变您的表面尺寸！它只会从您的角度移动它，即沿原点轴更近或更远的值。运行下面的示例并将translate更改为-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如何工作？

1 个答案:

编辑：根据上下文宽度