内SequentialLayout（famo.us）中心面

我试图解决中心不同宽度的表面的垂直SequentialLayout内的问题，在famo.us.我已经通过Famo.us大学和github网站上的源代码，但无法弄清楚“干净”解决方案。内SequentialLayout（famo.us）中心面

例如，下面的代码是从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（我没有足够的“信誉”，发布图片，对不起！）

我试图添加改性剂添加的每个面可以看出但是，修饰符没有添加函数。任何其他简单的解决方案水平居中所有这些表面？

谢谢！

来源

2015-02-11 João Ventura

您可以先加入到一个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);

来源

2015-02-11 22:20:21 IjzerenHein

它的工作原理，谢谢！ :) 但我一直想知道为什么famo.us API非常直观。RenderNode应该是一个实现细节，而不是公共API。如果famo.us API在布局上具有* add *功能，就像它对视图和上下文具有的功能一样，这可以修复。 – 2015-02-12 09:24:17

我使用比例扩展了@ijzerenhein以获得乐趣** [点击此处查看jsBin示例]（http ：？//jsbin.com/layoqo/1/edit JS，输出）**。点击任意位置查看转场。 – talves 2015-02-12 15:32:05

@JoãoVentura是的，我完全同意。不得不一直写所有这些修饰符和渲染节点可能是一个真正的痛苦。我为famo.us做了一个名为famous-flex的布局的替代解决方案（https://github.com/IjzerenHein/famous-flex）。我使用LayoutController和布局函数编写了大部分视图，速度更快。着名的flex库仍然需要一个更好的使用LayoutController的教程，我希望能尽快解决。 – IjzerenHein 2015-02-12 15:55:45

内SequentialLayout（famo.us）中心面

回答

相关问题