How do I merge bitmaps?

Questions
1

This throws "t.drawImage is not a function" in createjs. So, I'm not doing it the way of ZIM?

        const s1 = new zim.Shape(50, 50).f("#f0f").dr(0, 0, 50, 50);
        const s2 = new zim.Shape(25, 25).f("#0f0").dr(0, 0, 25, 25);
        s1.cache(0, 0, 50, 50);
        s2.cache(0, 0, 25, 25);
        const b1 = new zim.Bitmap(s1.cacheCanvas);
        const b2 = new zim.Bitmap(s2.cacheCanvas);
        b1.draw(b2, 12.5, 12.5);
2

The Bitmap() accepts any DisplayObject and turns it into an image. It does not need the cacheCanvas, although will work with that too.

const c = new Container();
const s1 = new zim.Shape(50, 50).f("#f0f").dr(0, 0, 50, 50).addTo(c);
const s2 = new zim.Shape(25, 25).f("#0f0").dr(0, 0, 25, 25).center(c);
const b = new zim.Bitmap(c).center().drag();

The draw() method accepts a context and I guess the b2 Bitmap is an image.

3

OK - I see here you are making a bitmap from a composition. Can you also draw one bitmap into another, or as in your example do I have to use a Container to mix them?

4

I don't know... I have never used draw() directly. I read in the CreateJS docs that it expects a context as its first parameter. That would be

s2.cacheCanvas.getContext("2D")

maybe in your case. But it still gives the same error.

What are you trying to do? Could you do it with compositeOperation - we use blendmode or ble() in ZIM. Or there is cache() with source-over if you are just using Shape... like for blitting

1 Like
5

Yes, the blitting example does what I'm after - excellent. Thanks!

1 Like