SequentialLayout (famo.us)内部的中心曲面

Question

我试图解决在垂直SequentialLayout中，在famo.us中，不同宽度的曲面对中的问题。我已经浏览了Famo.us大学和github网站上的源代码，但是找不到一个“干净”的解决方案。

例如，以下代码来自http://famo.us/university/lessons/#/layout/sequential-layout/2，用于创建不同宽度的曲面：

var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var SequentialLayout = require("famous/views/SequentialLayout");

var mainContext = Engine.createContext();
var sequentialLayout = new SequentialLayout();
var surfaces = [];
sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surfaces.push(new Surface({
        size: [i*35, 50],   // <- Changed the width here!!!
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
        }
    }));
}

mainContext.add(sequentialLayout);

结果可以在http://i.stack.imgur.com/AEh2Y.png上看到(我没有足够的“声誉”来发布图片，对不起！)

我尝试添加一个修饰符来将每个曲面添加到其中，但是修饰符没有 add 函数。还有其他简单的方法来平放所有这些曲面吗？

谢谢!

Answer 1

您可以添加一个修饰符，方法是先将它添加到RenderNode中，然后将曲面添加到RenderNode中。这应该能起作用：

var RenderNode = require('famous/core/RenderNode');

var node = new RenderNode(new Modifier({
    align: [0.5, 0],
    origin: [0.5, 0]
}));
node.add(new Surface({
    size: [i*35, 50],   // <- Changed the width here!!!
    properties: {
        backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
    }
}));
surfaces.push(node);