finished up pattern fill support

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: May 12 2012
+ * Date: May 13 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -174,6 +174,10 @@ Kinetic.GlobalObject = {
         }
     },
     _setXY: function(obj, key, val) {
+        if(obj[key] === undefined) {
+            obj[key] = {};
+        }
+
         // val is an array
         if(Kinetic.GlobalObject._isArray(val)) {
             obj[key].x = val[0];
@@ -191,6 +195,10 @@ Kinetic.GlobalObject = {
         }
     },
     _setSize: function(obj, key, val) {
+        if(obj[key] === undefined) {
+            obj[key] = {};
+        }
+
         // val is an array
         if(Kinetic.GlobalObject._isArray(val)) {
             obj[key].x = val[2];
@@ -2553,14 +2561,26 @@ Kinetic.Shape.prototype = {
             // color fill
             if( typeof fill == 'string') {
                 f = this.attrs.fill;
+                context.fillStyle = f;
+                context.fill();
             }
             // pattern fill
             else if(fill.image !== undefined) {
-            	var o = Kinetic.GlobalObject._getPoint(fill.offset);
+                var o = {};
-            	
+
+                // set offset o
+                if(fill.offset !== undefined) {
+                    Kinetic.GlobalObject._setXY(o, 'pos', fill.offset);
+                }
 
                 var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
                 f = context.createPattern(fill.image, repeat);
+
+				context.save();
+				context.translate(o.pos.x, o.pos.y);
+                context.fillStyle = f;
+                context.fill();
+                context.restore();
             }
             // gradient fill
             else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
@@ -2569,6 +2589,8 @@ Kinetic.Shape.prototype = {
                 grd.addColorStop(0, s.color);
                 grd.addColorStop(1, e.color);
                 f = grd;
+                context.fillStyle = f;
+                context.fill();
             }
             // radial gradient
             else if(s.radius !== undefined && e.radius !== undefined) {
@@ -2577,13 +2599,17 @@ Kinetic.Shape.prototype = {
                 grd.addColorStop(0, s.color);
                 grd.addColorStop(1, e.color);
                 f = grd;
+                context.fillStyle = f;
+                context.fill();
             }
             else {
                 f = 'black';
+                context.fillStyle = f;
+                context.fill();
             }
 
-            context.fillStyle = f;
+            // TODO: if using fill offset, save context, translate offset, fill(), then restore
-            context.fill();
+
         }
     },
     /**

src/GlobalObject.js

@@ -146,6 +146,10 @@ Kinetic.GlobalObject = {
         }
     },
     _setXY: function(obj, key, val) {
+        if(obj[key] === undefined) {
+            obj[key] = {};
+        }
+
         // val is an array
         if(Kinetic.GlobalObject._isArray(val)) {
             obj[key].x = val[0];
@@ -163,6 +167,10 @@ Kinetic.GlobalObject = {
         }
     },
     _setSize: function(obj, key, val) {
+        if(obj[key] === undefined) {
+            obj[key] = {};
+        }
+
         // val is an array
         if(Kinetic.GlobalObject._isArray(val)) {
             obj[key].x = val[2];

src/Shape.js

@@ -116,14 +116,26 @@ Kinetic.Shape.prototype = {
             // color fill
             if( typeof fill == 'string') {
                 f = this.attrs.fill;
+                context.fillStyle = f;
+                context.fill();
             }
             // pattern fill
             else if(fill.image !== undefined) {
-            	var o = Kinetic.GlobalObject._getPoint(fill.offset);
+                var o = {};
-            	
+
+                // set offset o
+                if(fill.offset !== undefined) {
+                    Kinetic.GlobalObject._setXY(o, 'pos', fill.offset);
+                }
 
                 var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
                 f = context.createPattern(fill.image, repeat);
+
+				context.save();
+				context.translate(o.pos.x, o.pos.y);
+                context.fillStyle = f;
+                context.fill();
+                context.restore();
             }
             // gradient fill
             else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
@@ -132,6 +144,8 @@ Kinetic.Shape.prototype = {
                 grd.addColorStop(0, s.color);
                 grd.addColorStop(1, e.color);
                 f = grd;
+                context.fillStyle = f;
+                context.fill();
             }
             // radial gradient
             else if(s.radius !== undefined && e.radius !== undefined) {
@@ -140,13 +154,17 @@ Kinetic.Shape.prototype = {
                 grd.addColorStop(0, s.color);
                 grd.addColorStop(1, e.color);
                 f = grd;
+                context.fillStyle = f;
+                context.fill();
             }
             else {
                 f = 'black';
+                context.fillStyle = f;
+                context.fill();
             }
 
-            context.fillStyle = f;
+            // TODO: if using fill offset, save context, translate offset, fill(), then restore
-            context.fill();
+
         }
     },
     /**

tests/js/unitTests.js

@@ -92,8 +92,8 @@ Test.prototype.tests = {
                 radius: 70,
                 fill: {
                     image: imageObj,
-                    repeat: 'repeat',
+                    repeat: 'no-repeat',
-                    offset: [20, 20]
+                    offset: [-200, -70]
                 },
                 stroke: 'black',
                 strokeWidth: 4,
@@ -105,6 +105,7 @@ Test.prototype.tests = {
             layer.add(group);
             stage.add(layer);
 
+			test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
         };
         imageObj.src = '../darth-vader.jpg';