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.

Author: photonstorm

v3/src/checksum.js

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

v3/src/gameobjects/graphics/Graphics.js

@@ -4,6 +4,7 @@ var Components = require('../../components');
 var Render = require('./GraphicsRender');
 var Commands = require('./Commands');
 var MATH_CONST = require('../../math/const');
+var GetObjectValue = require('../../utils/object/GetObjectValue');
 
 var Graphics = new Class({
 
@@ -18,14 +19,48 @@ var Graphics = new Class({
 
     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);
 
         this.setPosition(x, y);
 
         this.commandBuffer = [];
         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)
@@ -96,6 +131,16 @@ var Graphics = new Class({
         return this;
     },
 
+    strokeShape: function (shape)
+    {
+
+    },
+
+    fillShape: function (shape)
+    {
+
+    },
+
     fillCircle: function (x, y, radius)
     {
         this.beginPath();
@@ -204,6 +249,16 @@ var Graphics = new Class({
     {
         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;
     }
 

v3/src/gameobjects/graphics/GraphicsFactory.js

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