Fix cacheAsBitmap respecting projection destinationFrame (#7274)

pixijs · Mar 15, 2021 · 5f392a3 · 5f392a3
1 parent 7a98538
commit 5f392a3
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/packages/mixin-cache-as-bitmap/src/index.ts b/packages/mixin-cache-as-bitmap/src/index.ts
@@ -234,6 +234,7 @@ DisplayObject.prototype._initCachedDisplayObject = function _initCachedDisplayOb
     // this could be more elegant..
     const cachedRenderTexture = renderer.renderTexture.current;
     const cachedSourceFrame = renderer.renderTexture.sourceFrame.clone();
+    const cachedDestinationFrame = renderer.renderTexture.destinationFrame.clone();
     const cachedProjectionTransform = renderer.projection.transform;
 
     // We also store the filter stack - I will definitely look to change how this works a little later down the line.
@@ -263,7 +264,7 @@ DisplayObject.prototype._initCachedDisplayObject = function _initCachedDisplayOb
 
     // now restore the state be setting the new properties
     renderer.projection.transform = cachedProjectionTransform;
-    renderer.renderTexture.bind(cachedRenderTexture, cachedSourceFrame);
+    renderer.renderTexture.bind(cachedRenderTexture, cachedSourceFrame, cachedDestinationFrame);
 
     // renderer.filterManager.filterStack = stack;
 

diff --git a/packages/mixin-cache-as-bitmap/test/index.js b/packages/mixin-cache-as-bitmap/test/index.js
@@ -1,5 +1,6 @@
 const { DisplayObject, Container } = require('@pixi/display');
 const { Renderer, Filter } = require('@pixi/core');
+const { Rectangle } = require('@pixi/math');
 
 require('../');
 
@@ -41,18 +42,69 @@ describe('PIXI.DisplayObject#cacheAsBitmap', function ()
 
         try
         {
-            renderer = new Renderer();
+            renderer = new Renderer({ width: 50, height: 50 });
             renderer.filter.push(par, par.filters);
+
+            const srcExpected = new Rectangle(5, 15, 10, 11);
+            const destExpected = new Rectangle(0, 0, 10, 11);
+
+            let src = renderer.renderTexture.sourceFrame;
+            let dest = renderer.renderTexture.destinationFrame;
+
+            expect(src.toString()).to.equal(srcExpected.toString());
+            expect(dest.toString()).to.equal(destExpected.toString());
+
+            obj.render(renderer);
+
+            src = renderer.renderTexture.sourceFrame;
+            dest = renderer.renderTexture.destinationFrame;
+
+            expect(obj._cacheData.sprite.width).to.equal(10);
+            expect(obj._cacheData.sprite.height).to.equal(11);
+            expect(src.toString()).to.equal(srcExpected.toString());
+            expect(dest.toString()).to.equal(destExpected.toString());
+        }
+        finally
+        {
+            renderer.destroy();
+        }
+    });
+
+    it('should respect projection', function ()
+    {
+        const par = new Container();
+        const obj = new Container();
+        let renderer = null;
+
+        par.filters = [new Filter()];
+        par.addChild(obj);
+
+        obj.position.set(5, 15);
+        obj.updateTransform();
+        obj.cacheAsBitmap = true;
+        obj._calculateBounds = function ()
+        {
+            this._bounds.clear();
+            this._bounds.addFrame(this.transform, 0, 0, 10, 11);
+        };
+
+        try
+        {
+            const srcExpected = new Rectangle(5, 15, 10, 11);
+            const destExpected = new Rectangle(20, 20, 10, 11);
+
+            renderer = new Renderer({ width: 50, height: 50 });
+            renderer.renderTexture.bind(null, srcExpected, destExpected);
+
             obj.render(renderer);
 
-            const frame = renderer.renderTexture.sourceFrame;
+            const src = renderer.renderTexture.sourceFrame;
+            const dest = renderer.renderTexture.destinationFrame;
 
             expect(obj._cacheData.sprite.width).to.equal(10);
             expect(obj._cacheData.sprite.height).to.equal(11);
-            expect(frame.x).to.equal(5);
-            expect(frame.y).to.equal(15);
-            expect(frame.width).to.equal(10);
-            expect(frame.height).to.equal(11);
+            expect(src.toString()).to.equal(srcExpected.toString());
+            expect(dest.toString()).to.equal(destExpected.toString());
         }
         finally
         {