如何使用 Famo.us 在容器表面中创建表面答案

【问题标题】：How do I create Surfaces in a Container Surface using Famo.us如何使用 Famo.us 在容器表面中创建表面
【发布时间】：2023-03-23 04:34:02
【问题描述】：

我想在里面喜欢

<div main>
    <div content>
        my content
    </div>
</div>

那么表面内部的表面呢？我做不到：

new Surface({
    content: new Surface({})
});

我希望它的布局如下： http://i.imgur.com/dAJFtmN.png

[编辑]我的问题是如何使用 famo.us 在图片中创建布局。具体来说，如何在一个 div 内有一个 div 或在一个表面内有一个表面。我现在正在查看 famo.us 布局示例，谢谢

【问题讨论】：

你在这里问什么？
查看famo.us/university/home/#/layouts他们有一些例子。
在著名的/surfaces/ContainerSurface.js 包中使用一个ContainerSurface。它还允许您创建这种嵌套结构。

标签： javascript html css famo.us

【解决方案1】：

您可以对项目使用 GridLayout 并将网格添加到 ContainerSurface。当然，还有其他方法可以完成您的布局。您应该根据需要的用例进行布局。

Example on jsBin

  var mainContext = Engine.createContext();

  var container = new ContainerSurface({
    size: [400, 400],
    properties: {
      overflow: 'hidden',
      backgroundColor: "hsl(" + (100 * 360 / 40) + ", 100%, 50%)"
    }
  });
  var grid = new GridLayout({
    dimensions: [2, 2],
    gutterSize: [30, 30]
  });

  var surfaces = [];
  grid.sequenceFrom(surfaces);

  var temp;
  for (var i = 0; i < 4; i++) {
    temp = new Surface({
      size: [150, 150],
      content: 'I am surface: ' + (i + 1),
      properties: {
        textAlign: 'center',
        lineHeight: '150px',
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)"
      }
    });

    surfaces.push(temp);
  }

  container.add(grid);

  mainContext.add(new Modifier({
    align: [0.5, 0.5],
    origin: [0.5, 0.5]
  })).add(container);

【讨论】：

【解决方案2】：

使用 SurfaceContainer

var container = new ContainerSurface({
   classes:[ "some-class"]
});

var surf1 = new Surface({content: "Hello World"});
var surf2 = new Surface({content: "Second Surface"});
container.add(surf1);
container.add(surf2);

【讨论】：