为什么在 Famous Engine 中使用 Size Component 设置节点的大小不起作用？

Question

这是应该将我的节点大小设置为 500x500px 的代码：

'use strict';

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.core.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods.
boxSize.setSizeMode('absolute', 'absolute')
    .setAbsolute(500, 500);

FamousEngine.init();

当它执行时，boxSize.absoluteSize = [ 500, 500, 0] 这很好。但是boxNode._components[1].absoluteSize 仍然是[0,0,0]——这可能就是为什么盒子永远不会达到我试图设置的大小的原因（_components[1] 引用节点的 Size 组件）。

如果我在 boxNode 上使用 size 方法，则大小正确。根据Famous Docs，看起来我应该能够在节点或附加到节点的大小组件上设置它。

这让我很烦：P

Answer 1

我们来看看Sizing in Famous Guides
正如你所说，一个节点可以使用它的大小方法来调整大小。节点还可以使用在onUpdate 期间管理节点大小调整方法的组件来处理大小调整。

怎么了？

该示例尝试使用内部 Size 类。这是Node用来处理节点大小的内部组件，已经应用于Node类。

var Size = famous.core.Size;

正确的组件用于管理大小

使用components Size 类来管理Node 的大小。

var Size = famous.components.Size;

var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.components.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods on the component.
boxSize.setMode('absolute', 'absolute', 'absolute')
    .setAbsolute(200, 200, 0);

FamousEngine.init();

var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.components.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods on the component.
boxSize.setMode('absolute', 'absolute', 'absolute')
    .setAbsolute(200, 200, 0);

FamousEngine.init();

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
              
            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: white;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }

<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>