Skips Canvas drawImage calls if invalid frame sizes given. Fix #5951

This commit is contained in:
Richard Davey 2022-02-03 16:44:24 +00:00
parent 7d63bbc116
commit a4308cfa3a
7 changed files with 77 additions and 54 deletions

View file

@ -180,6 +180,12 @@ The following are API-breaking, in that a new optional parameter has been insert
* The `Polygon` Game Object would ignore its `closePath` property when rendering in Canvas. Fix #5983 (thanks @optimumsuave)
* IE9 Fix: Added 2 missing Typed Array polyfills (thanks @jcyuan)
* IE9 Fix: CanvasRenderer ignores frames with zero dimensions (thanks @jcyuan)
* `RenderTexture.batchTextureFrame` will now skip the `drawImage` call in canvas if the frame width or height are zero. Fix #5951 (thanks @Hoshinokoe)
* `BlitterCanvasRenderer` will now skip the `drawImage` call in canvas if the frame width or height are zero.
* `ParticleManagerCanvasRenderer` will now skip the `drawImage` call in canvas if the frame width or height are zero.
* `CanvasSnapshot` will now skip the `drawImage` call in canvas if the frame width or height are zero.
* `TextureManager.getBase64` will now skip the `drawImage` call in canvas if the frame width or height are zero.
* `TilemapLayerCanvasRenderer` will now skip the `drawImage` call in canvas if the frame width or height are zero.
### Examples, Documentation and TypeScript

View file

@ -85,17 +85,20 @@ var BlitterCanvasRenderer = function (renderer, src, camera, parentMatrix)
dy = Math.round(dy);
}
ctx.drawImage(
frame.source.image,
cd.x,
cd.y,
cd.width,
cd.height,
dx + bob.x + cameraScrollX,
dy + bob.y + cameraScrollY,
cd.width,
cd.height
);
if (cd.width > 0 && cd.height > 0)
{
ctx.drawImage(
frame.source.image,
cd.x,
cd.y,
cd.width,
cd.height,
dx + bob.x + cameraScrollX,
dy + bob.y + cameraScrollY,
cd.width,
cd.height
);
}
}
else
{
@ -111,11 +114,14 @@ var BlitterCanvasRenderer = function (renderer, src, camera, parentMatrix)
dy -= cd.height;
}
ctx.save();
ctx.translate(bob.x + cameraScrollX, bob.y + cameraScrollY);
ctx.scale(fx, fy);
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, dx, dy, cd.width, cd.height);
ctx.restore();
if (cd.width > 0 && cd.height > 0)
{
ctx.save();
ctx.translate(bob.x + cameraScrollX, bob.y + cameraScrollY);
ctx.scale(fx, fy);
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, dx, dy, cd.width, cd.height);
ctx.restore();
}
}
}

View file

@ -103,26 +103,29 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, camera,
var frame = particle.frame;
var cd = frame.canvasData;
var x = -(frame.halfWidth);
var y = -(frame.halfHeight);
ctx.globalAlpha = alpha;
ctx.save();
calcMatrix.setToContext(ctx);
if (roundPixels)
if (cd.width > 0 && cd.height > 0)
{
x = Math.round(x);
y = Math.round(y);
var x = -(frame.halfWidth);
var y = -(frame.halfHeight);
ctx.globalAlpha = alpha;
ctx.save();
calcMatrix.setToContext(ctx);
if (roundPixels)
{
x = Math.round(x);
y = Math.round(y);
}
ctx.imageSmoothingEnabled = !(!renderer.antialias || frame.source.scaleMode);
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
ctx.restore();
}
ctx.imageSmoothingEnabled = !(!renderer.antialias || frame.source.scaleMode);
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
ctx.restore();
}
ctx.restore();

View file

@ -1282,7 +1282,10 @@ var RenderTexture = new Class({
matrix.setToContext(ctx);
ctx.drawImage(source, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
if (cd.width > 0 && cd.height > 0)
{
ctx.drawImage(source, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
}
ctx.restore();
}

View file

@ -10,7 +10,7 @@ var GetFastValue = require('../../utils/object/GetFastValue');
/**
* Takes a snapshot of an area from the current frame displayed by a canvas.
*
*
* This is then copied to an Image object. When this loads, the results are sent
* to the callback provided in the Snapshot Configuration object.
*
@ -45,10 +45,13 @@ var CanvasSnapshot = function (canvas, config)
var copyCanvas = CanvasPool.createWebGL(this, width, height);
var ctx = copyCanvas.getContext('2d');
ctx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
if (width > 0 && height > 0)
{
ctx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
}
var image1 = new Image();
image1.onerror = function ()
{
callback.call(null);
@ -69,7 +72,7 @@ var CanvasSnapshot = function (canvas, config)
{
// Full Grab
var image2 = new Image();
image2.onerror = function ()
{
callback.call(null);

View file

@ -331,17 +331,20 @@ var TextureManager = new Class({
var canvas = CanvasPool.create2D(this, cd.width, cd.height);
var ctx = canvas.getContext('2d');
ctx.drawImage(
textureFrame.source.image,
cd.x,
cd.y,
cd.width,
cd.height,
0,
0,
cd.width,
cd.height
);
if (cd.width > 0 && cd.height > 0)
{
ctx.drawImage(
textureFrame.source.image,
cd.x,
cd.y,
cd.width,
cd.height,
0,
0,
cd.width,
cd.height
);
}
data = canvas.toDataURL(type, encoderOptions);

View file

@ -90,15 +90,14 @@ var TilemapLayerCanvasRenderer = function (renderer, src, camera, parentMatrix)
var image = tileset.image.getSourceImage();
var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
var tileWidth = tileset.tileWidth;
var tileHeight = tileset.tileHeight;
if (tileTexCoords === null)
if (tileTexCoords === null || tileWidth === 0 || tileHeight === 0)
{
continue;
}
var tileWidth = tileset.tileWidth;
var tileHeight = tileset.tileHeight;
var halfWidth = tileWidth * 0.5;
var halfHeight = tileHeight * 0.5;