10

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 的正确方法，但事实并非如此。

4

4 回答 4

11

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

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

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

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

您需要使用 aModifier因为在 a 上设置大小Surface不会影响DOM，只会影响用于内部计算的大小。（这可用于间距，请参阅布局指南）

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

于 2014-04-11T22:04:58.547 回答
7

从 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/着名-sizeconstraint

于 2014-11-02T22:37:30.603 回答
5

我使用 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)

于 2014-04-16T00:03:56.953 回答
0

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

  var firstSurface = new Surface({
    size: [100, 400],
    content: 'hello world',
    properties: {
      color: 'red',
      textAlign: 'center',
      backgroundColor: '#FA5C4F',
      minWidth: '90%',
      maxHeight: '60%'
    }   
  });
于 2014-10-05T19:11:44.153 回答