Javascript 设置大小：修改器与曲面

在修改器上设置大小与在曲面本身上设置大小之间有什么区别

我的理解是，单个曲面的布局基于添加到其中的修改器的组成。（状态）修饰符是否仅与位置相关而与大小无关

为什么下面的代码不将曲面的大小限制为50x50，而不是渲染100x100的正方形？（何时设置修改器的大小合适？）

谢谢

法学博士

---

简单地说，当您设置大小时，曲面会得到一种姿态，它会告诉修改器亲吻它的屁股。使曲面尊重修改器的唯一方法是将大小设置为[未定义，未定义]（或只是未定义），因为它将使用修改器的大小

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

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

在这种情况下，这将输出完全相同的结果，但是如果您再给修改器任何子项，它们也将受到大小的影响

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