javascript - 设置大小: Modifier vs Surface

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

谢谢

京东

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

Answer 1

简单地说，当你设置尺寸时，表面会得到一个态度，它会告诉修改器拍拍它的屁股。使表面尊重修改器的唯一方法是将大小设置为[未定义，未定义](或只是未定义)，因为它将使用修改器的大小。

本质上，引擎获取修改器提供的大小，并将其设置为要渲染的后续组件的当前大小。但是，您的表面定义了一个新的尺寸，因此引擎将使用该尺寸，但仅限于该表面。

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

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