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

【问题标题】：Is it possible to set Surface sizes based on percentages in Famo.us?是否可以根据 Famo.us 中的百分比设置表面尺寸？
【发布时间】：2014-11-30 14:34:39
【问题描述】：

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 属性。我认为这是使用 % 的正确方法，但事实并非如此。

【问题讨论】：

标签： famo.us

【解决方案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）

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

【讨论】：

我知道这并不难，只是这样做似乎很愚蠢。
如何获得父级？
取决于您如何构建代码。我猜你没有父母的参考，对吗？在这种情况下，您可以查看ContextualView.js。（阅读源代码并检查提交功能）。如果您需要更多信息，也许可以发布另一个 SO 问题！

【解决方案2】：

从 famo.us v0.3 开始，添加了比例大小。您现在可以使用这种表示法：

new Modifier({
    size: [undefined, undefined],
    proportions: [0.5, 1/3] // width 50%, height 33%
});

您还可以使用例如 SizeConstraint 进行尺寸缩放：

var sizeCS = new SizeConstraint({
   scale: [0.5, 1.3]
});
sizeCS.add(new Surface({..}));

https://github.com/IjzerenHein/famous-sizeconstraint

【讨论】：

【解决方案3】：

我使用 famo.us 制作了 Breezi、Thinglist 和 Lumosity capptivate.co 示例 (neaumusic.github.io)

表面：

size:[undefined, undefined],

// this is default; size key can be ommited; fills Modifier size

修饰符：

size: [window.innerWidth * 0.5, window.innerHeight * 0.5],

稍后，您可以通过 Transform.scale() 或 Transform.rotateY() 在您的修改器上使用 .setTransform() ，并且由于您的 Surface 直接与修改器重叠，因此不会发生任何奇怪的事情。这并不是说您不能使用 1 像素乘 1 像素的修改器来从 Surface 的左上角定位 Surface，这让我想到了另一个与定位混淆的话题......

原点定位

如果您有一个原点 [0.3, 0.3]，则内框 30% 处的位置将与外框 30% 处对齐。

换句话说，使用 CSS 将内部的左边缘对齐到外部的左边缘：

position: absolute,
left: 30%

不等同于 origin: [0.3, Y] 因为您的内部对象将离其宽度的 30% 太远

但是相当于移位：

origin: [0, Y],
transform: Transform.translate(window.innerWidth * 0.3, 0, 0)

建议我只使用 9 个位置作为原点

盒子的角、边的中间和中心（0.5, 0.5）

【讨论】：

【解决方案4】：

Famo.us 确实管理表面的大小，但您可以设置表面的最小和最大宽度和高度以响应。

  var firstSurface = new Surface({
    size: [100, 400],
    content: 'hello world',
    properties: {
      color: 'red',
      textAlign: 'center',
      backgroundColor: '#FA5C4F',
      minWidth: '90%',
      maxHeight: '60%'
    }   
  });

【讨论】：