Search code examples
javascriptcreatejseaseljs

How to clone easeljs bitmap which has filters on it that been cached.

...

let blurFilter = new createjs.BlurFilter(blurX, blurY, blurQuality);
bitmap.filters = [blurFilter];
bitmap.cache(0, -blurY, this.width, this.height + blurY);

...

bitmap.clone() doesn't clone the cached bitmap with filters. It only clones the original file image.

I don't want to apply filters twice as it will take lot of time and resources

Solution

  • Since DisplayObjects don't clone their caches (which would probably create some unexpected results), you could simply assign the cache yourself:

    var bmp2 = bmp1.clone();
bmp2.cacheCanvas = bmp1.cacheCanvas;
bmp2.bitmapCache = bmp2.bitmapCache; // Also required for version 1.0+

    Note that will make both instances update if you updated either of the bitmaps using updateCache().

    A way I use a lot is to simply make the cacheCanvas the source of new Bitmaps. If you are using a scale factor, you will have to accommodate it.

    var bmp2 = new createjs.Bitmap(bmp2.cacheCanvas);

    This approach will not work if you are using WebGL caches (via StageGL).

    Hope that helps.