Jump to content


Recommended Posts

This is a question and answer at the same time.

So during an 'onclick' event I've used createjs to

'addChild' so that the 'child' or 'displayObject'

is re - added to the canvas every time it's clicked. 

I've done this so that the 'displayObject' (in this case a bitmap),

has a primery z-index, so it overlays all other children

of the canvas or the canvas container.

It seems a bit of a hack in that there doesn't seem an easy way

to arrange your z-index with javascript.

I haven't got the code in front of me but it's something like this;

-bit map created


function(event){'click'  -- bla bla

addChild(picture1)  }  ....So I'm adding 'picture1' during the 'event'.

when it's already added to the stage. So if you have a number

of images say 20, each time it's clicked, it becomes the top of the stack.

and the order 'addChild(picture"whatever")' is fired as many times as the user

wants. This might be a createjs hack rather than a canvas hack, as the canvas

is supposed to be continually redrawn. Any thoughts would be great and I'll

grab the code and post it when I get the chance. H 


Edited by harrywatson
no exact code available
Link to comment
Share on other sites

I use CreateJS as well, and the sorting of children in a container by a zIndex property is missing. There is a 'sortChildren' method though, but you need to pass a sort function of your own.

This is what I have done:

DisplayObject.prototype.zIndex = 0;

So all display objects have a zIndex property. After you add a child to a container you can do something like this then:

var sortBy = function(a, b) { return a.zIndex - b.zIndex; };
container.addChild( sprite );
container.sortChildren( sortBy );


Link to comment
Share on other sites

Hey great @gregmax17 !

That makes clear what I've been staring at for over a year.

I'd been trying to use a z-index without declaring a variable,

I think my brain has just dribbled out onto the floor..


I'm away from Mrs computer but would like to post my;

'stage.addChild, stage.addChild' type code hack soon.

happy day h (annoying smiley face here)

Link to comment
Share on other sites

Ok here's the code; hopefully it's a bit like a css - inline override, rather than a code butchering:


pic1 = new createjs.Bitmap("images/marae.png");
pic1.x = 0;
pic1.y = 0;
pic1.scaleX = .1;
pic1.scaleY = .1;
pic1.cursor = "pointer";

  And then I want it to scale up in front of another lot of thumbnail images. When the picture is clicked again, it goes back to it's grid of thumbnails. I can add as many 'pics' as will nicely fit the page. Note the whole reason for this post: stage.addChild again:

var pic1big = false;
	pic1.on("click", function(event){
		if(pic1big == false){
		.to({scaleX: 1, scaleY: 1}, 600);
		pic1big = true;}else
		if(pic1big == true){
		.to({scaleX: .1, scaleY: .1}, 600);
		pic1big = false;}

So am I bad? Have I done wrong? Happy day

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...