javascript - 该节点无权访问尺寸组件

Question

我的代码如下

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
var Position = require('famous/components/Position');
var Transitionable = require('famous/transitions/Transitionable');
var Size = require('famous/components/Size')
var Tile = require('./Tile.js');
var Card = require('./Card.js');
var Selector = require('./Selector.js');
var ChannelCard = require('./ChannelCard.js');
var PanelCard = require('./PanelCard.js');
var KeyCodes = require('../utils/KeyCodes.js');

function App(selector, data) {
  this.context = FamousEngine.createScene(selector);
  this.rootNode = this.context.addChild();

  this.tilesData = data.tilesData;
  this.selectedTileIndex = 0;

  this.tiles = [];

var firstNode = this.rootNode.addChild(new Card('url(images/tile-01-vidaa.png)','#9a105f', FIRST_X_POSITION, Y_POSITION));

}.bind(this));

 module.exports = App;

Card.js 看起来像这样:

  var DOMElement = require('famous/dom-renderables/DOMElement');
    var FamousEngine = require('famous/core/FamousEngine');
    var Transitionable = require('famous/transitions/Transitionable');
    var Node = require('famous/core/Node');
    var FIRST_X_POSITION = 100;
    var Y_POSITION = 200;
    function Card(bgUrl, bgColor, xpos, ypos) {
      Node.call(this);
      console.log("xpos + " + xpos);
      console.log("ypos + " + ypos);
      this.setSizeMode('absolute', 'absolute');
      this.setAbsoluteSize(250, 250);
      this.setPosition(xpos, ypos);
      this.nodeDomElement = new DOMElement(this);
      this.nodeDomElement.setProperty('backgroundImage', bgUrl);
      this.nodeDomElement.setProperty('background-color', bgColor);
    }


    Card.prototype = Object.create(Node.prototype);
    Card.prototype.constructor = Card;
    module.exports = Card;

但是，当我使用着名的开发运行时，出现以下错误

Uncaught Error: This node does not have access to a size component

setSizeMode @ Node.js:1061Card @ Card.js:11App @ App.js:43

请帮我找出导致错误的原因以及如何修复。

Answer 1

您的节点需要上下文。如果您尚未将节点添加到场景中(或者还没有场景)，请在组件上运行任何方法之前添加它。在我的 3D Asteroids 游戏示例中，我必须执行以下操作以避免错误:

function Game(scene, world) {
Node.call(this);
scene.addChild(this);
this._domElement = new DOMElement(this);
this.world = world;
this.asteroids = [];
this.bullets = [];
this.setProportionalSize(1, 1, 1);
this.addUIEvent('click');
this.addUIEvent('keydown');

}

如果您尚未创建场景，可以通过运行以下命令来创建:

function Game() {
// ...
var context = FamousEngine.getContext('body');
context.addChild(this);

}