容器中的形状不会在舞台上显示答案

【问题标题】：Shapes in containers are not shown on the stage容器中的形状不会在舞台上显示
【发布时间】：2014-02-24 11:06:33
【问题描述】：

在这段代码JSFiddle Code 中，我尝试在舞台上放置一个大容器。这个大容器还有另外 2 个容器，每个容器都包含一个形状。我想看舞台上的形状，但我做不到。编译器不会抛出任何错误。

这是我写的代码：

// CREATE STAGE //
var stage = new createjs.Stage("myCanvas");

// CREATE TIME_CONTAINER //
var time_container = new createjs.Container();
time_container.x = stage.x;
time_container.y = stage.y;
time_container.width =  stage.width;
time_container.height = stage.height;

// CREATE DEV CONTAINER //
var dev_container = new createjs.Container();
dev_container.x = time_container.x;
dev_container.y = time_container.y;
dev_container.width = time_container.width / 2;
dev_container.height = time_container.height;
var dev_shape = new createjs.Shape();
dev_shape.graphics.beginFill("#ff0000").drawRect(dev_container.x,dev_container.y,dev_container.width,dev_container.height);




 // CREATE PLAYER CONTAINER //
 var player_container = new createjs.Container();
 player_container.x = time_container.width / 2;
 player_container.y = time_container.y;
 player_container.width = time_container.width / 2;
 player_container.height = time_container.height;
 var player_shape = new createjs.Shape();
 player_shape.graphics.beginFill("#ff0000").drawRect(player_container.x,player_container.y,player_container.width,player_container.height);



// ADD TIME_CONTAINER TO THE STAGE //
stage.addChild(time_container);
time_container.addChild(dev_container,player_container);
dev_container.addChild(dev_shape);
player_container.addChild(player_shape);
stage.update();

【问题讨论】：

stage.width 和 height 未定义！
@ProllyGeek 我有这样的画布我还需要定义如果我从已经有宽度和高度的画布上创建它？
不，你刚刚错过了 stage.canvas.width;和stage.canvas.height；，仅此而已

标签： javascript html containers shapes easeljs

【解决方案1】：

// CREATE STAGE //
var stage = new createjs.Stage("myCanvas");

// CREATE TIME_CONTAINER //
var time_container = new createjs.Container();
time_container.x = stage.x;
time_container.y = stage.y;

time_container.width =stage.canvas.width;
time_container.height =stage.canvas.width;

// CREATE DEV CONTAINER //
var dev_container = new createjs.Container();
dev_container.x = time_container.x;
dev_container.y = time_container.y;
dev_container.width = time_container.width / 2;
dev_container.height = time_container.height;
var dev_shape = new createjs.Shape();
dev_shape.graphics.beginFill("#ff0000").drawRect(dev_container.x,dev_container.y,dev_container.width,dev_container.height);


// CREATE PLAYER CONTAINER //
var player_container = new createjs.Container();
player_container.x = time_container.width / 2;
player_container.y = time_container.y;
player_container.width = time_container.width / 2;
player_container.height = time_container.height;
var player_shape = new createjs.Shape();
player_shape.graphics.beginFill("#ff0000").drawRect(player_container.x,player_container.y,player_container.width,player_container.height);



// ADD TIME_CONTAINER TO THE STAGE //
stage.addChild(time_container);
time_container.addChild(dev_container,player_container);
dev_container.addChild(dev_shape);
player_container.addChild(player_shape);

stage.update();

http://jsfiddle.net/prollygeek/4AP48/17/

【讨论】：

您的回答对我帮助很大，但我仍然无法在舞台上显示第二个容器。你知道这行不通吗？
它在那里只是改变它的颜色
我已经这样做了。第二个没有添加到舞台
控制台说 dev 和 player 容器都没有定义！奇怪！

【解决方案2】：

我设法让这两种形状都出现在舞台上。形状属性（x、y、宽度、高度）不正确。我从第一个形状中获取了形状属性，现在它可以正常工作了。代码如下：

// CREATE STAGE //
var stage = new createjs.Stage("myCanvas");

// CREATE TIME_CONTAINER //
var time_container = new createjs.Container();
time_container.x = stage.x;
time_container.y = stage.y;
time_container.width =stage.canvas.width;
time_container.height =stage.canvas.width;

// CREATE DEV CONTAINER //
var dev_container = new createjs.Container();
dev_container.x = time_container.x;
dev_container.y = time_container.y;
dev_container.width = time_container.width / 2;
dev_container.height = time_container.height;
var dev_shape = new createjs.Shape();
dev_shape.graphics.beginFill("#00b35a").drawRect(dev_container.x,dev_container.y,dev_container.width,dev_container.height);


// CREATE PLAYER CONTAINER //
var player_container = new createjs.Container();
player_container.x = time_container.width / 2;
player_container.y = time_container.y;
player_container.width = time_container.width / 2;
player_container.height = time_container.height;
var player_shape = new createjs.Shape();
player_shape.graphics.beginFill("#ff0000").drawRect(dev_container.x,dev_container.y,dev_container.width,dev_container.height);



// ADD TIME_CONTAINER TO THE STAGE //
dev_container.addChild(dev_shape);
player_container.addChild(player_shape);
time_container.addChild(dev_container);
time_container.addChild(player_container);
stage.addChild(time_container);
stage.update();

这里是JS Fiddle的链接

【讨论】：