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

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

无论第0个数组元素是否被删除,"width"属性都不会执行任何操作,即使它声称可以在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,仅用于内部计算的大小.(这可以用于间距,请参阅布局指南)

假设你想要一个视口的百分比,我使用了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)