內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）中心面

回答

相關問題