The Canvas SetTransform method would save the context state, but it wasn't restored at the end in the following Game Objects: Dynamic Bitmap Text, Graphics, Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star and Triangle. These now all restore the context, meaning if you're using non-canvas sized cameras in Canvas mode, it will now render beyond just the first custom camera.

This commit is contained in:
Richard Davey 2018-11-27 13:54:59 +00:00
parent 91e4a91c5a
commit b0df6892b5
15 changed files with 46 additions and 18 deletions

View file

@ -116,6 +116,7 @@
* `Particle.index` has been removed, as it's no longer required. Particles don't need to keep track of their index any more. * `Particle.index` has been removed, as it's no longer required. Particles don't need to keep track of their index any more.
* The Particle Emitter no longer needs to call the StableSort.inplace during its preUpdate, saving cpu. * The Particle Emitter no longer needs to call the StableSort.inplace during its preUpdate, saving cpu.
* `Particle.resetPosition` is a new method that is called when a particle dies, preparing it ready for firing again in the future. * `Particle.resetPosition` is a new method that is called when a particle dies, preparing it ready for firing again in the future.
* The Canvas `SetTransform` method would save the context state, but it wasn't restored at the end in the following Game Objects: Dynamic Bitmap Text, Graphics, Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star and Triangle. These now all restore the context, meaning if you're using non-canvas sized cameras in Canvas mode, it will now render beyond just the first custom camera.
### Examples and TypeScript ### Examples and TypeScript

View file

@ -72,7 +72,6 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
if (src.cropWidth > 0 && src.cropHeight > 0) if (src.cropWidth > 0 && src.cropHeight > 0)
{ {
ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.rect(0, 0, src.cropWidth, src.cropHeight); ctx.rect(0, 0, src.cropWidth, src.cropHeight);
ctx.clip(); ctx.clip();
@ -167,11 +166,7 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
lastCharCode = charCode; lastCharCode = charCode;
} }
if (src.cropWidth > 0 && src.cropHeight > 0) // Restore the context saved in SetTransform
{
ctx.restore();
}
ctx.restore(); ctx.restore();
}; };

View file

@ -45,8 +45,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
var green = 0; var green = 0;
var blue = 0; var blue = 0;
ctx.save();
// Reset any currently active paths // Reset any currently active paths
ctx.beginPath(); ctx.beginPath();
@ -239,6 +237,7 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
} }
} }
// Restore the context saved in SetTransform
ctx.restore(); ctx.restore();
}; };

View file

@ -61,6 +61,9 @@ var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -73,6 +73,9 @@ var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, came
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -70,6 +70,9 @@ var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, ca
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -86,6 +86,9 @@ var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, cam
ctx.fill(); ctx.fill();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -99,6 +99,9 @@ var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage
ctx.fill(); ctx.fill();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -42,6 +42,9 @@ var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camer
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -70,6 +70,9 @@ var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, ca
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -70,6 +70,9 @@ var StarCanvasRenderer = function (renderer, src, interpolationPercentage, camer
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -60,6 +60,9 @@ var TriangleCanvasRenderer = function (renderer, src, interpolationPercentage, c
ctx.stroke(); ctx.stroke();
} }
// Restore the context saved in SetTransform
ctx.restore();
} }
}; };

View file

@ -410,7 +410,15 @@ var CanvasRenderer = new Class({
var ctx = (camera.renderToTexture) ? camera.context : scene.sys.context; var ctx = (camera.renderToTexture) ? camera.context : scene.sys.context;
var scissor = (cx !== 0 || cy !== 0 || cw !== ctx.canvas.width || ch !== ctx.canvas.height); // Save context pre-clip
ctx.save();
if (this.game.scene.customViewports)
{
ctx.beginPath();
ctx.rect(cx, cy, cw, ch);
ctx.clip();
}
this.currentContext = ctx; this.currentContext = ctx;
@ -426,15 +434,6 @@ var CanvasRenderer = new Class({
this.drawCount += list.length; this.drawCount += list.length;
ctx.save();
if (scissor)
{
ctx.beginPath();
ctx.rect(cx, cy, cw, ch);
ctx.clip();
}
if (camera.renderToTexture) if (camera.renderToTexture)
{ {
camera.emit('prerender', camera); camera.emit('prerender', camera);
@ -473,6 +472,7 @@ var CanvasRenderer = new Class({
camera.dirty = false; camera.dirty = false;
// Restore pre-clip context
ctx.restore(); ctx.restore();
if (camera.renderToTexture) if (camera.renderToTexture)