如何使用 Famo.us 在容器曲面中创建曲面

How do I create Surfaces in a Container Surface using Famo.us

本文关键字：曲面 创建 何使用 Famo us      更新时间：2023-09-26

我想在里面 喜欢

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

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

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

我希望它的布局是这样的：https://i.stack.imgur.com/dcqHn.png

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

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

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

使用 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);
相关文章：