Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-22 20:53:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added missing Shape canvas render functions

Browse source
This commit is contained in:
Richard Davey 2018-09-11 13:50:01 +01:00
parent 9aeba9e73e
commit 83fa5261e6
9 changed files with 413 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/gameobjects/shape/FillStyleCanvas.js
View file

@ -14,9 +14,9 @@
* @param {CanvasRenderingContext2D} ctx - The context to set the fill style on.
* @param {Phaser.GameObjects.Shape} src - The Game Object to set the fill style from.
*/
var FillStyleCanvas = function (ctx, src)
var FillStyleCanvas = function (ctx, src, altColor)
{
var fillColor = src.fillColor;
var fillColor = (altColor) ? altColor : src.fillColor;
var fillAlpha = src.fillAlpha;
var red = ((fillColor & 0xFF0000) >>> 16);

41
src/gameobjects/shape/arc/ArcCanvasRenderer.js
View file

@ -4,6 +4,11 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var DegToRad = require('../../../math/DegToRad');
var FillStyleCanvas = require('../FillStyleCanvas');
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +26,42 @@
*/
var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var radius = src.radius;
ctx.beginPath();
ctx.arc(
(radius) - src.originX * (radius * 2),
(radius) - src.originY * (radius * 2),
radius,
DegToRad(src._startAngle),
DegToRad(src._endAngle),
src.anticlockwise
);
if (src.closePath)
{
ctx.closePath();
}
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = ArcCanvasRenderer;

53
src/gameobjects/shape/curve/CurveCanvasRenderer.js
View file

@ -4,6 +4,10 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +25,55 @@
*/
var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var dx = src._displayOriginX + src._curveBounds.x;
var dy = src._displayOriginY + src._curveBounds.y;
var path = src.pathData;
var pathLength = path.length - 1;
var px1 = path[0] - dx;
var py1 = path[1] - dy;
ctx.beginPath();
ctx.moveTo(px1, py1);
if (!src.closePath)
{
pathLength -= 2;
}
for (var i = 2; i < pathLength; i += 2)
{
var px2 = path[i] - dx;
var py2 = path[i + 1] - dy;
ctx.lineTo(px2, py2);
}
if (src.closePath)
{
ctx.closePath();
}
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = CurveCanvasRenderer;

50
src/gameobjects/shape/ellipse/EllipseCanvasRenderer.js
View file

@ -4,6 +4,10 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +25,52 @@
*/
var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var path = src.pathData;
var pathLength = path.length - 1;
var px1 = path[0] - dx;
var py1 = path[1] - dy;
ctx.beginPath();
ctx.moveTo(px1, py1);
if (!src.closePath)
{
pathLength -= 2;
}
for (var i = 2; i < pathLength; i += 2)
{
var px2 = path[i] - dx;
var py2 = path[i + 1] - dy;
ctx.lineTo(px2, py2);
}
ctx.closePath();
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = EllipseCanvasRenderer;

66
src/gameobjects/shape/isobox/IsoBoxCanvasRenderer.js
View file

@ -4,6 +4,9 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +24,69 @@
*/
var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix) && src.isFilled)
{
var size = src.width;
var height = src.height;
var sizeA = size / 2;
var sizeB = size / src.projection;
// Top Face
if (src.showTop)
{
FillStyleCanvas(ctx, src, src.fillTop);
ctx.beginPath();
ctx.moveTo(-sizeA, -height);
ctx.lineTo(0, -sizeB - height);
ctx.lineTo(sizeA, -height);
ctx.lineTo(sizeA, -1);
ctx.lineTo(0, sizeB - 1);
ctx.lineTo(-sizeA, -1);
ctx.lineTo(-sizeA, -height);
ctx.fill();
}
// Left Face
if (src.showLeft)
{
FillStyleCanvas(ctx, src, src.fillLeft);
ctx.beginPath();
ctx.moveTo(-sizeA, 0);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
ctx.lineTo(-sizeA, -height);
ctx.lineTo(-sizeA, 0);
ctx.fill();
}
// Right Face
if (src.showRight)
{
FillStyleCanvas(ctx, src, src.fillRight);
ctx.beginPath();
ctx.moveTo(sizeA, 0);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
ctx.lineTo(sizeA, -height);
ctx.lineTo(sizeA, 0);
ctx.fill();
}
}
};
module.exports = IsoBoxCanvasRenderer;

79
src/gameobjects/shape/isotriangle/IsoTriangleCanvasRenderer.js
View file

@ -4,6 +4,9 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +24,82 @@
*/
var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix) && src.isFilled)
{
var size = src.width;
var height = src.height;
var sizeA = size / 2;
var sizeB = size / src.projection;
var reversed = src.isReversed;
// Top Face
if (src.showTop && reversed)
{
FillStyleCanvas(ctx, src, src.fillTop);
ctx.beginPath();
ctx.moveTo(-sizeA, -height);
ctx.lineTo(0, -sizeB - height);
ctx.lineTo(sizeA, -height);
ctx.lineTo(0, sizeB - height);
ctx.fill();
}
// Left Face
if (src.showLeft)
{
FillStyleCanvas(ctx, src, src.fillLeft);
ctx.beginPath();
if (reversed)
{
ctx.moveTo(-sizeA, -height);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
}
else
{
ctx.moveTo(-sizeA, 0);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
}
ctx.fill();
}
// Right Face
if (src.showRight)
{
FillStyleCanvas(ctx, src, src.fillRight);
ctx.beginPath();
if (reversed)
{
ctx.moveTo(sizeA, -height);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
}
else
{
ctx.moveTo(sizeA, 0);
ctx.lineTo(0, sizeB);
ctx.lineTo(0, sizeB - height);
}
ctx.fill();
}
}
};
module.exports = IsoTriangleCanvasRenderer;

22
src/gameobjects/shape/line/LineCanvasRenderer.js
View file

@ -4,6 +4,9 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +24,25 @@
*/
var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var dx = src._displayOriginX;
var dy = src._displayOriginY;
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.beginPath();
ctx.moveTo(src.data.x1 - dx, src.data.y1 - dy);
ctx.lineTo(src.data.x2 - dx, src.data.y2 - dy);
ctx.stroke();
}
}
};
module.exports = LineCanvasRenderer;

50
src/gameobjects/shape/polygon/PolygonCanvasRenderer.js
View file

@ -4,6 +4,10 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +25,52 @@
*/
var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var path = src.pathData;
var pathLength = path.length - 1;
var px1 = path[0] - dx;
var py1 = path[1] - dy;
ctx.beginPath();
ctx.moveTo(px1, py1);
if (!src.closePath)
{
pathLength -= 2;
}
for (var i = 2; i < pathLength; i += 2)
{
var px2 = path[i] - dx;
var py2 = path[i + 1] - dy;
ctx.lineTo(px2, py2);
}
ctx.closePath();
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = PolygonCanvasRenderer;

50
src/gameobjects/shape/star/StarCanvasRenderer.js
View file

@ -4,6 +4,10 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var FillStyleCanvas = require('../FillStyleCanvas');
var LineStyleCanvas = require('../LineStyleCanvas');
var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -21,6 +25,52 @@
*/
var StarCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var ctx = renderer.currentContext;
if (SetTransform(renderer, ctx, src, camera, parentMatrix))
{
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var path = src.pathData;
var pathLength = path.length - 1;
var px1 = path[0] - dx;
var py1 = path[1] - dy;
ctx.beginPath();
ctx.moveTo(px1, py1);
if (!src.closePath)
{
pathLength -= 2;
}
for (var i = 2; i < pathLength; i += 2)
{
var px2 = path[i] - dx;
var py2 = path[i + 1] - dy;
ctx.lineTo(px2, py2);
}
ctx.closePath();
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = StarCanvasRenderer;