using cache in a complex structure

Question

I'm using easeljs to build a certain structure. Inside that structure, there are many containers and shapes.

I ran across a problem where I needed to change the color of a certain element when the user hovered it with his mouse. I managed to do it However there is a considerable delay until the color is drawn and return to its original color because the stage redraws itself.

I saw that I could use the cache for this purpose so I follow the example in the docs like this: myShape.cache(150, 150, 100, 100, 1); however nothings happens and I don't see the shape. I have to say that the shape resides inside a container which is added to the stage.

Here's the relevant code:

var g = curShape.graphics.clone().clear();
                   
                        g.beginFill("#2aa4eb");
                        g.drawRoundRect(0, 0, curShape.width, curShape.height, 1.5);
                        //g.drawRect(0, 0, curShape.width + 2, curShape.height + 2);
                        g.endFill();
                        g.endStroke();
                        var newShape= new createjs.Shape(g);
                        newShape.cache(150, 150, 100, 100, 2);

Any help would be appreciated

Answer 1

You are caching at x:150 and y:150, but you are drawing your shapes at 0,0. If your shape is smaller than 150x150, then it will be caching nothing. Change your cache to 0,0, and it should be fine.

Additionally, you are not providing the 5th parameter (corner radius) to the drawRoundRect call, which will make it fail. Here is a quick sample with a modified version of your code.

http://jsfiddle.net/LNXVg/

var stage = new createjs.Stage("canvas");

var g = new createjs.Graphics();

g.beginFill("#2aa4eb");
g.drawRoundRect(0, 0, 300, 200, 5);
var newShape = new createjs.Shape(g);
//newShape.cache(150, 150, 100, 100, 2);
newShape.cache(0, 0, 100, 100, 2);

stage.addChild(newShape);
stage.update();