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

代码：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 }
    );
});

最佳答案

没看过这个库，但是我想我已经正确地解决了这个问题，只是缺少解释：

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

在这里，您可以在另一个修饰符的上方添加一个修饰符，以便将原点堆叠起来。 modifier1是0.5，mainContext是0.5。但是modifier2具有相同的起源，但是它相对于modifier1应用，这是额外距离的来源。

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

编辑：固定小提琴链接