设置尺寸:改性剂与表面

Question

在修饰符上设置大小与在表面设置大小之间有什么区别？

我的理解是，一个单独的表面是根据它被添加到的修饰符的组成来布置的。(状态)修饰符是否只与位置有关，而不与大小有关？

为什么下面的代码不将表面的大小限制在50x50，而不是渲染100x100平方呢？(何时设置修饰符的大小合适？)

var stateModifier = new StateModifier({
  size: [50, 50],
  transform: Transform.translate(50, 100, 0)
});

var surface = new Surface({
  size: [100, 100],
  properties: {
     backgroundColor: '#FA5C4F'
  }
});

mainContext.add(stateModifier).add(surface);

谢谢,

JD

http://famo.us/university/lessons/#/famous-101/positioning/2

Answer 1

简单地说，当你设定一个尺寸时，表面会得到一种姿态，它会告诉修饰语亲吻它的屁股。使表面尊重修饰符的唯一方法是将大小设置为undefined, undefined，因为它随后将使用修饰符的大小。

本质上，引擎获取修饰符提供的大小，并将其设置为要呈现的以下组件的当前大小。然而，您的曲面定义了一个新的大小，因此引擎将使用该大小，但只用于该曲面。

TLDR:为了限制，不要给表面一个尺寸

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var stateModifier = new StateModifier({
  size: [100, 100],
  transform: Transform.translate(150, 100, 0)
});

var surface = new Surface({
  properties: {
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(stateModifier).add(surface);

在这种情况下，这将输出完全相同的结果，但是如果您给修饰符提供更多的子元素，那么它们也会受到大小的影响。