mirror of
https://github.com/photonstorm/phaser
synced 2024-11-26 22:52:14 +00:00
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:
parent
91e4a91c5a
commit
b0df6892b5
15 changed files with 46 additions and 18 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -61,6 +61,9 @@ var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -73,6 +73,9 @@ var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, came
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,6 +70,9 @@ var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, ca
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -86,6 +86,9 @@ var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, cam
|
||||||
|
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -99,6 +99,9 @@ var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage
|
||||||
|
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -42,6 +42,9 @@ var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camer
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,6 +70,9 @@ var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, ca
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,6 +70,9 @@ var StarCanvasRenderer = function (renderer, src, interpolationPercentage, camer
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -60,6 +60,9 @@ var TriangleCanvasRenderer = function (renderer, src, interpolationPercentage, c
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore the context saved in SetTransform
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in a new issue