Search code examples
cachingrenderingeaseljscreatejs

EaselJS cache Text object

I would like some help regarding caching Text objects using EaselJS library.

I never fully understood how caching works, and i must be missing something really fundamental, because i cannot seem to make it work.

Take the following simle example.

this.label.cache(this.label.x, this.label.y, rec.width, rec.height);

https://jsfiddle.net/xnqcjsg8/

If you comment the line that caches the Text object then it is displayed correctly. Otherwise you can see nothing on stage.

I know that i can and should cache text objects, because they are expensive to render, but i cannot figure out how.

Any help appreciated, thanks in advance!

Solution

  • Caching is relative to the object, so if you move the object on the x/y, you don't have to update the cache. Additionally, when you adjust the alignment, the bounds will have an x and y property, which will be the offset of the top left from the registration point.

    Here is an update fiddle: https://jsfiddle.net/xnqcjsg8/1/

    This is the new cache function. If you sub out the x and y with [0,0] you can see that how it crops based on the alignment.

    this.label.cache(rec.x, rec.y, rec.width, rec.height);

    I also simplified your fiddle a little.