Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-23 05:03:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added Canvas rendering functions

Browse source
This commit is contained in:
Richard Davey 2018-09-10 23:30:19 +01:00
parent dfa40b866f
commit 4b1c0eb697
4 changed files with 138 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/gameobjects/shape/FillStyleCanvas.js Normal file
View file

@ -0,0 +1,29 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* Sets the fillStyle on the target context based on the given Shape.
*
* @method Phaser.GameObjects.Shape#FillStyleCanvas
* @since 3.13.0
* @private
*
* @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 fillColor = src.fillColor;
var fillAlpha = src.fillAlpha;
var red = ((fillColor & 0xFF0000) >>> 16);
var green = ((fillColor & 0xFF00) >>> 8);
var blue = (fillColor & 0xFF);
ctx.fillStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + fillAlpha + ')';
};
module.exports = FillStyleCanvas;

30
src/gameobjects/shape/LineStyleCanvas.js Normal file
View file

@ -0,0 +1,30 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* Sets the strokeStyle and lineWidth on the target context based on the given Shape.
*
* @method Phaser.GameObjects.Shape#LineStyleCanvas
* @since 3.13.0
* @private
*
* @param {CanvasRenderingContext2D} ctx - The context to set the stroke style on.
* @param {Phaser.GameObjects.Shape} src - The Game Object to set the stroke style from.
*/
var LineStyleCanvas = function (ctx, src)
{
var strokeColor = src.strokeColor;
var strokeAlpha = src.strokeAlpha;
var red = ((strokeColor & 0xFF0000) >>> 16);
var green = ((strokeColor & 0xFF00) >>> 8);
var blue = (strokeColor & 0xFF);
ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + strokeAlpha + ')';
ctx.lineWidth = src.lineWidth;
};
module.exports = LineStyleCanvas;

39
src/gameobjects/shape/rectangle/RectangleCanvasRenderer.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,41 @@
*/
var RectangleCanvasRenderer = 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.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fillRect(
-dx,
-dy,
src.width,
src.height
);
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.beginPath();
ctx.rect(
-dx,
-dy,
src.width,
src.height
);
ctx.stroke();
}
}
};
module.exports = RectangleCanvasRenderer;

40
src/gameobjects/shape/triangle/TriangleCanvasRenderer.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,42 @@
*/
var TriangleCanvasRenderer = 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 x1 = src.data.x1 - dx;
var y1 = src.data.y1 - dy;
var x2 = src.data.x2 - dx;
var y2 = src.data.y2 - dy;
var x3 = src.data.x3 - dx;
var y3 = src.data.y3 - dy;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
if (src.isFilled)
{
FillStyleCanvas(ctx, src);
ctx.fill();
}
if (src.isStroked)
{
LineStyleCanvas(ctx, src);
ctx.stroke();
}
}
};
module.exports = TriangleCanvasRenderer;