javascript - rotateY 时两个表面之间的距离

Question

代码: http://jsfiddle.net/qhoc/8gg7gkqv/

我希望红色表面平放在灰色表面之上。但是当我旋转 modifier1 时，您可以看到两个表面之间的距离(标记为??)。如何摆脱这个“差距”？

JS:

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var Easing = Famous.Transitions.Easing;

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

    var modifier1 = new StateModifier({
      size: [200, 200],
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var surface1 = new Surface({
      properties: {
        background: 'gray'
      }
    });

    var modifier2 = new StateModifier({
      size: [50, 100],
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var surface2 = new Surface({
      properties: {
        background: 'red'
      }
    });

    var graphNode = mainContext.add(modifier1);
    graphNode.add(surface1);
    graphNode.add(modifier2).add(surface2);

    modifier1.setTransform(
      Transform.rotate(0, Math.PI/2.2, 0),
      { duration: 2000, curve: Easing.outElastic }
    );

    modifier2.setTransform(
      Transform.scale(1, 2, 1),
      { duration: 2000, curve: Easing.outElastic }
    );
});

Answer 1

从未见过这个库，但我认为我正确地解决了问题 here , 只是解释可能欠缺:

var graphNode = mainContext.add(modifier1);
graphNode.add(surface1);
1graphNode.add(modifier2).add(surface2);

在这里，您将一个修改器添加到另一个修改器之上，因此起源堆叠。 modifier1 是 0.5，0.5 来自 mainContext。但是 modifier2 具有相同的起源，但它是相对于 modifier1 应用的，这是额外距离的来源。

解决方法是将modifier2的原点设置为0,0，或者将其添加到mainContext中。我认为前者是您想要的。

编辑:固定 fiddle 链接