Createjs index hack

[harrywatson]

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

stage.addChild(picture1);

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 August 18, 2016 by harrywatson
no exact code available

[gregmax17]

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 );

 

[harrywatson]

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..

Thanks!

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)

[harrywatson]

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";
stage.addChild(pic1);

  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){
		stage.addChild(pic1);
		if(pic1big == false){
		createjs.Tween.get(pic1)
		.to({scaleX: 1, scaleY: 1}, 600);
		pic1big = true;}else
		
		if(pic1big == true){
		createjs.Tween.get(pic1)
		.to({scaleX: .1, scaleY: .1}, 600);
		pic1big = false;}
	}); 

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