rotateY时两个曲面之间的距离

Question

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

我希望红色表面平放在灰色表面的顶部。但是当我旋转modifier1时，你可以看到两个曲面之间的距离（标记为??）。如何摆脱这种差距＆＃34;？

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与mainContext相距0.5 {0.5}。但是modifier2具有相同的起源，但它相对于modifier1应用，这是额外距离的来源。

解决方案是将modifier2的来源设置为0,0，或将其添加到mainContext。我认为前者就是你想要的。

编辑：修复小提琴链接