Graphics objects now just take a config object, not a position.

Graphics objects can set default stroke and fill styles, which are re-applied after a clear.
This commit is contained in:
Richard Davey 2017-03-29 15:06:06 +01:00
parent b3b495e53c
commit 18fa6292a6
3 changed files with 61 additions and 8 deletions

View file

@ -1,4 +1,4 @@
var CHECKSUM = { var CHECKSUM = {
build: '5d589820-1417-11e7-a4fb-712e101ac5d8' build: '02229ca0-1488-11e7-8e2a-13177b968951'
}; };
module.exports = CHECKSUM; module.exports = CHECKSUM;

View file

@ -4,6 +4,7 @@ var Components = require('../../components');
var Render = require('./GraphicsRender'); var Render = require('./GraphicsRender');
var Commands = require('./Commands'); var Commands = require('./Commands');
var MATH_CONST = require('../../math/const'); var MATH_CONST = require('../../math/const');
var GetObjectValue = require('../../utils/object/GetObjectValue');
var Graphics = new Class({ var Graphics = new Class({
@ -18,14 +19,48 @@ var Graphics = new Class({
initialize: initialize:
function Graphics (state, x, y) function Graphics (state, options)
{ {
var x = GetObjectValue(options, 'x', 0);
var y = GetObjectValue(options, 'y', 0);
GameObject.call(this, state); GameObject.call(this, state);
this.setPosition(x, y); this.setPosition(x, y);
this.commandBuffer = []; this.commandBuffer = [];
this.initRenderPassComponent(); this.initRenderPassComponent();
this.defaultFillColor = -1;
this.defaultFillAlpha = 1;
this.defaultStrokeWidth = 1;
this.defaultStrokeColor = -1;
this.defaultStrokeAlpha = 1;
this.setDefaultStyles(options);
},
setDefaultStyles: function (options)
{
if (GetObjectValue(options, 'lineStyle', null))
{
this.defaultStrokeWidth = GetObjectValue(options, 'lineStyle.width', 1);
this.defaultStrokeColor = GetObjectValue(options, 'lineStyle.color', 0xffffff);
this.defaultStrokeAlpha = GetObjectValue(options, 'lineStyle.alpha', 1);
this.lineStyle(this.defaultStrokeWidth, this.defaultStrokeColor, this.defaultStrokeAlpha);
}
if (GetObjectValue(options, 'fillStyle', null))
{
this.defaultFillColor = GetObjectValue(options, 'fillStyle.color', 0xffffff);
this.defaultFillAlpha = GetObjectValue(options, 'fillStyle.alpha', 1);
this.fillStyle(this.defaultFillColor, this.defaultFillAlpha);
}
return this;
}, },
arc: function (x, y, radius, startAngle, endAngle, anticlockwise) arc: function (x, y, radius, startAngle, endAngle, anticlockwise)
@ -96,6 +131,16 @@ var Graphics = new Class({
return this; return this;
}, },
strokeShape: function (shape)
{
},
fillShape: function (shape)
{
},
fillCircle: function (x, y, radius) fillCircle: function (x, y, radius)
{ {
this.beginPath(); this.beginPath();
@ -204,6 +249,16 @@ var Graphics = new Class({
{ {
this.commandBuffer.length = 0; this.commandBuffer.length = 0;
if (this.defaultFillColor > -1)
{
this.fillStyle(this.defaultFillColor, this.defaultFillAlpha);
}
if (this.defaultStrokeColor > -1)
{
this.lineStyle(this.defaultStrokeWidth, this.defaultStrokeColor, this.defaultStrokeAlpha);
}
return this; return this;
} }

View file

@ -5,16 +5,14 @@ var GraphicsFactory = {
KEY: 'graphics', KEY: 'graphics',
add: function (x, y, group) add: function (options)
{ {
if (group === undefined) { group = this.state; } return this.state.children.add(new Graphics(this.state, options));
return group.children.add(new Graphics(this.state, x, y));
}, },
make: function (x, y) make: function (options)
{ {
return new Graphics(this.state, x, y); return new Graphics(this.state, options);
} }
}; };