From 3251c4614b8fc5fc34634d139271653b3ecd3c6e Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 7 May 2023 13:44:35 +0200 Subject: [PATCH] fix(): 5.x Disable offscreen check for bg and overlay when not needed (#8896) --- CHANGELOG.md | 20 +++++++ src/static_canvas.class.js | 5 ++ test/visual/generic_rendering.js | 66 +++++++++++++++++++++ test/visual/golden/bgOverlayRespectVpt.png | Bin 0 -> 805 bytes test/visual/golden/bgOverlayVpt.png | Bin 0 -> 1106 bytes 5 files changed, 91 insertions(+) create mode 100644 test/visual/golden/bgOverlayRespectVpt.png create mode 100644 test/visual/golden/bgOverlayVpt.png diff --git a/CHANGELOG.md b/CHANGELOG.md index 5300a0cf2b8..75bed5e0f31 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog +## [5.4.0] + +- fix() fix an issue with offScreen detection and background/overlay Vpt setting [`#8896`](https://github.com/fabricjs/fabric.js/pull/8896) + +## [5.2.1] + +- fix(): add `eraser` to Object state/cache props [`#7720`](https://github.com/fabricjs/fabric.js/pull/7720) + +## [5.2.0] + +- feat(fabric.Object): isType accepts multiple `type` [`#7715`](https://github.com/fabricjs/fabric.js/pull/7715) +- chore(): Replace deprecated String.prototype.substr() with Array.prototype.slice() [`#7696`](https://github.com/fabricjs/fabric.js/pull/7696) +- chore(): use Array.isArray instead of ie6+ workarounds [`#7718`](https://github.com/fabricjs/fabric.js/pull/7718) +- MINOR: feat(fabric.Canvas): add `getTopContext` method to expose the internal contextTop [`#7697`](https://github.com/fabricjs/fabric.js/pull/7697) +- fix(fabric.Object) Add cacheContext checks before trying to render on cache [`#7694`](https://github.com/fabricjs/fabric.js/pull/7694) +- tests(): node test suite enhancement [`#7691`](https://github.com/fabricjs/fabric.js/pull/7691) +- feat(Canvas#getCenter): migrate to `getCenterPoint` [`#7699`](https://github.com/fabricjs/fabric.js/pull/7699) +- updated package.json [`803ce95`](https://github.com/fabricjs/fabric.js/commit/803ce95878150fba9e4195804bccae9bcfe45c6d) +- tests(fabric.animation): fix test reliability [`4be0fb9`](https://github.com/fabricjs/fabric.js/commit/4be0fb9903e15db294b89030feb645e5da766740) + ## [5.1.0] - build(deps): bump node-fetch from 2.6.6 to 2.6.7 [`#7684`](https://github.com/fabricjs/fabric.js/pull/7684) diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index a070fcab064..2b7e3173bfa 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -999,10 +999,15 @@ } if (object) { ctx.save(); + var skipOffscreen = this.skipOffscreen; + // if the object doesn't move with the viewport, + // the offscreen concept does not apply; + this.skipOffscreen = needsVpt; if (needsVpt) { ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); } object.render(ctx); + this.skipOffscreen = skipOffscreen; ctx.restore(); } }, diff --git a/test/visual/generic_rendering.js b/test/visual/generic_rendering.js index 7b20b3eb666..82cb76ab29f 100644 --- a/test/visual/generic_rendering.js +++ b/test/visual/generic_rendering.js @@ -361,6 +361,72 @@ height: 100, }); + function bgOverlayVpt(canvas, callback) { + var rectbg = new fabric.Rect({ + width: 300, + height: 300, + top: 0, + left: 0, + fill: 'rgba(255,0,0,0.5)' + }); + var rectoverlay = new fabric.Rect({ + width: 300, + height: 300, + top: 0, + left: 0, + fill: 'rgba(0,0,255,0.5)' + }); + canvas.overlayVpt = false; + canvas.backgroundVpt = false; + canvas.setViewportTransform([0.1,0,0,0.1,7000,7000]); + canvas.backgroundImage = rectbg; + canvas.overlayImage = rectoverlay; + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'bg-overlay and vpts', + code: bgOverlayVpt, + golden: 'bgOverlayVpt.png', + percentage: 0.04, + width: 300, + height: 300, + }); + + function bgOverlayRespectingVpt(canvas, callback) { + var rectbg = new fabric.Rect({ + width: 300, + height: 300, + top: 0, + left: 0, + fill: 'rgba(255,0,0,0.5)' + }); + var rectoverlay = new fabric.Rect({ + width: 300, + height: 300, + top: 0, + left: 0, + fill: 'rgba(0,0,255,0.5)' + }); + canvas.overlayVpt = true; + canvas.backgroundVpt = true; + canvas.setViewportTransform([0.9,0,0,0.9,150,150]); + canvas.backgroundImage = rectbg; + canvas.overlayImage = rectoverlay; + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'bg-overlay and vpts', + code: bgOverlayRespectingVpt, + golden: 'bgOverlayRespectVpt.png', + percentage: 0.04, + width: 300, + height: 300, + }); + function gradientStroke(canvas, callback) { var line = new fabric.Line([10, 10, 200, 200], { stroke: new fabric.Gradient({ diff --git a/test/visual/golden/bgOverlayRespectVpt.png b/test/visual/golden/bgOverlayRespectVpt.png new file mode 100644 index 0000000000000000000000000000000000000000..00bdb42047f23a8973d4096c88e036c547b3ed83 GIT binary patch literal 805 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYY>nc6VX;4}uH!E}zW6z;w&g z#WAE}&f6=FyoVeZ7!EdnSjE^9!kGW(iu2N>1^GG?KJ0jt>UMBn84pnV5CT80=aw;K zTOIqk>)5vQ?-F$TZ!)fVDRujw$qj>6#$4LqZq;S~mt Yxz&2vnc6VX;4}uH!E}zW6z{2k7 z;uumf=j|0k!9xrJ30y6zgefR+f)wWxZu8BnAFSH__Vc~I$ZL#0iu;qN zeKkIR{i-6v{yXdW7%Wb2Xy7@_WW>XL!azsi@F-_A3`Wzzkjo1_`WzG3eO9lMsRR}h N44$rjF6*2UngHA;a+v@C literal 0 HcmV?d00001