Draw Vectors to a Bitmap in EaselJS

Question

I'm working on an EaselJS program that continually draws thousands of vectors. Needless to say, after a short amount of time, performance drops. To solve this in Flash, I would have created a Bitmap behind the vectors and periodically draw the vectors to that Bitmap and remove them from the display list.

I'm having trouble doing this in EaselJS, even though it seems like all the pieces are in place. How can I create an empty Bitmap() and draw the contents of my Container() to it?

Answer 1

I think you can just put everything in a container and cache it.

var vectorContainer=new Container;
for (var i = 0;i<numVectors;i++){
  var vector=new Shape();
  //draw whatever vector you want to vector.graphics
  vectorContainer.addChild(vector);
}
vectorContainer.cache(someX,someY,someW,someH);

However get the newest untagged build as the current release has a bug and doesn't cache container properly.

Answer 2

I've also been adding the 'snapToPixel = true' to vectors because I've read it is supposed to help in some browsers. So, in your example code above, I would add the following line right before the last line where you do your caching.

vectorContainer.snapToPixel = true;

Check out this demo of cache and snap to pixel settings to see a live example.

In my particular browser set up, the snap to pixel does not actually change the performance, but in my reading of the docs it seems like it should.