为什么不使用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组件）的大小的原因。 / p>

如果我在boxNode上使用size方法，那么事情的大小正确。根据{{​​3}}，看起来我应该可以在节点或连接到节点的大小组件上设置它。

这让我烦恼：P

Answer 1

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

什么错了？

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

var Size = famous.core.Size;

用于管理尺寸的正确组件

使用components尺寸类来管理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>