// 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();
Shapes in containers are not shown on the stage
-
15-10-2022 - |
Question
in this code JSFiddle Code I try to put one big container on the stage. This one big container has other 2 containers that each contain a shape. I want to see the shapes on the stage but I can not mange to do it. The compiler throws no errors.
Here is the code I wrote:
// 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();
La solution
Autres conseils
I managed to get both shapes on the stage. The shape properties (x,y,width,height) were not right. I took the shape properties from the first shape and now it works fine. Here is the code:
// 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();
And here is the link to JS Fiddle
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow