SequentialLayout 内的中心表面 (famo.us)

Question

我正在尝试解决 famo.us 中垂直 SequentialLayout 中不同宽度的 Surface 居中的问题。我浏览了 Famo.us 大学和 github 网站上的源代码，但无法找出 "clean" 解决方案..

例如，以下代码改编自 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 看到（我没有足够的 "reputation" 到 post 图片，抱歉！）

我尝试添加一个修改器来添加每个表面，但是，修改器没有 add 功能。还有其他简单的解决方案可以将所有这些表面水平居中吗？

谢谢！

Answer 1

您可以通过先将修改器添加到渲染节点，然后将表面添加到渲染节点来添加修改器。这应该可以解决问题：

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);

SequentialLayout 内的中心表面 (famo.us)

Center Surfaces inside SequentialLayout (famo.us)

famo.us