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

Why doesn't setting the size of a Node using Size Component in Famous Engine work?

这是 应该 将我的节点大小设置为 500x500 像素的代码:

'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] 引用节点的大小组件)。

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

这让我很烦:P

我们来看看Sizing in Famous Guides
正如您所说,可以使用 Node 的大小方法来调整 Node 的大小。节点还可以使用在 onUpdate.

期间管理节点大小调整方法的组件来处理大小调整

怎么了?

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

var Size = famous.core.Size;

用于管理大小的更正组件

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