Question

Famo.us曲面有一种设置曲面大小的方法。它们具有“大小”属性，该属性采用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属性。我认为这将是使用％的正确方法，但事实并非如此。

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）

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

Answer 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

Answer 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%

不等于原点：[0.3，Y]因为你的内部物体距离太远了它的宽度的30％

但相当于转移：

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

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

角落，边缘的中间和盒子的中心（0.5,0.5）

Answer 4

Famo.us确实管理了曲面的大小，但您可以在曲面上设置最小和最大宽度和高度，以便做出响应。

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

是否可以根据Famo.us中的百分比设置Surface尺寸？

4 个答案:

表面：

改性剂：

使用原点定位