为什么在 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>
这是 应该 将我的节点大小设置为 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>