famo.us - 是否可以根据 Famo.us 中的百分比设置表面尺寸？

Question

Famo.us Surfaces 有一个单一的方法来设置一个表面的大小。它们有一个“大小”属性，该属性采用 2 个数字组成的数组，这些数字直接对应于像素值。考虑到大量不同的屏幕尺寸，这在处理移动设备时并不太有用。这将要求用户对父容器的大小进行数学运算，而不是 Famo.us 在幕后进行数学运算。

如果未给出其中一个值，它将使用该维度的 100% 可用，但我无法看到指定 50% 或 33%。

var firstSurface = new Surface({
  size: [100, 400],
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F',
    width: "200px"
  }
});

"width"属性不管第 0 个数组元素是否被移除都不做任何事情，即使它声称你可以在 camelCase 中使用 CSS 属性。我认为这将是使用 %'s 的正确方法，但事实并非如此。

Answer 1

不，这是不可能的。您需要计算，但这并不难:

var sizeModifier = new Modifier();
sizeModifier.sizeFrom(function(){
    var size = mainContext.getSize();
    return [0.5 * size[0],0.5 * size[1]];
});

引擎发出 resize主上下文中的事件，您可以在其中连接修饰符。

使用 sizeFrom功能，可以动态设置大小。

您需要使用 Modifier因为在 Surface 上设置大小不是 影响 DOM，仅用于内部计算的大小。 (这可用于间距，见 layout guide )

假设您想要一定百分比的视口(viewport)，我使用了 mainContext，即 [100%,100%]。当然也可以调用getSize在任何父曲面上。