added drawFunc property to layer so that layers can easily draw non-node background graphics

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 08 2012
+ * Date: May 09 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -2220,6 +2220,7 @@ Kinetic.Layer = function(config) {
     this.lastDrawTime = 0;
     this.beforeDrawFunc = undefined;
     this.afterDrawFunc = undefined;
+    this.drawFunc = undefined;
 
     this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
@@ -2344,6 +2345,12 @@ Kinetic.Layer.prototype = {
 
         this.clear();
         if(this.attrs.visible) {
+        	// draw custom func
+        	if (this.drawFunc !== undefined) {
+        		this.drawFunc();	
+        	}
+        	
+        	// draw children
             this._drawChildren();
         }
 
@@ -2432,7 +2439,7 @@ Kinetic.Shape = function(config) {
         lineJoin: undefined,
         detectionType: 'path',
         shadowColor: undefined,
-        shadowBlur: undefined,
+        shadowBlur: 5,
         shadowOffset: {
             x: 0,
             y: 0
@@ -2548,7 +2555,8 @@ Kinetic.Shape.prototype = {
         }
     },
     /**
-     * apply shadow helper method
+     * apply shadow based on shadowColor, shadowBlur,
+     * and shadowOffset properties
      */
     applyShadow: function() {
         var context = this.getContext();

src/Layer.js

@@ -18,6 +18,7 @@ Kinetic.Layer = function(config) {
     this.lastDrawTime = 0;
     this.beforeDrawFunc = undefined;
     this.afterDrawFunc = undefined;
+    this.drawFunc = undefined;
 
     this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
@@ -142,6 +143,12 @@ Kinetic.Layer.prototype = {
 
         this.clear();
         if(this.attrs.visible) {
+        	// draw custom func
+        	if (this.drawFunc !== undefined) {
+        		this.drawFunc();	
+        	}
+        	
+        	// draw children
             this._drawChildren();
         }
 

src/Shape.js

@@ -23,7 +23,7 @@ Kinetic.Shape = function(config) {
         lineJoin: undefined,
         detectionType: 'path',
         shadowColor: undefined,
-        shadowBlur: undefined,
+        shadowBlur: 5,
         shadowOffset: {
             x: 0,
             y: 0
@@ -139,7 +139,8 @@ Kinetic.Shape.prototype = {
         }
     },
     /**
-     * apply shadow helper method
+     * apply shadow based on shadowColor, shadowBlur,
+     * and shadowOffset properties
      */
     applyShadow: function() {
         var context = this.getContext();

tests/js/functionalTests.js

@@ -1151,6 +1151,45 @@ Test.prototype.tests = {
         layer.add(redCircle);
         stage.add(layer);
     },
+    'DRAG AND DROP - custom draw func and drag and drop layer': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer({
+            drawFunc: function() {
+                var context = this.getContext();
+                context.beginPath();
+                context.moveTo(200, 50);
+                context.lineTo(420, 80);
+                context.quadraticCurveTo(300, 100, 260, 170);
+                context.closePath();
+                context.fillStyle = 'blue';
+                context.fill();
+            },
+            draggable: true
+        });
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red'
+        });
+
+        var circle2 = new Kinetic.Circle({
+            x: 400,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green'
+        });
+
+        layer.add(circle);
+        layer.add(circle2);
+
+        stage.add(layer);
+    },
     'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1187,12 +1226,12 @@ Test.prototype.tests = {
 
         layer.draw();
 
-		var trans = null;
+        var trans = null;
 
         star.on('dragstart', function() {
-        	if (trans) {
+            if(trans) {
-        		trans.stop();
+                trans.stop();
-        	}
+            }
             star.setAttrs({
                 shadowOffset: {
                     x: 15,

tests/js/unitTests.js

@@ -113,6 +113,33 @@ Test.prototype.tests = {
         stage.add(layer);
 
     },
+    'STAGE - add shape with alpha': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer({
+            throttle: 9999
+        });
+        var group = new Kinetic.Group();
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red'
+        });
+
+        group.add(circle);
+        layer.add(group);
+        stage.add(layer);
+
+        circle.setAlpha(0.5);
+        layer.draw();
+
+        circle.setAlpha(0.5);
+        layer.draw();
+    },
     'STAGE - add layer then group then shape': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1410,15 +1437,15 @@ Test.prototype.tests = {
         star.setLineJoin('bevel');
         test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
 
-		star.setLineJoin('round');
+        star.setLineJoin('round');
-		/*
+        /*
-        stage.onFrame(function(frame) {
+         stage.onFrame(function(frame) {
-            star.rotate(1 * frame.timeDiff / 1000);
+         star.rotate(1 * frame.timeDiff / 1000);
-            layer.draw();
+         layer.draw();
-        });
+         });
 
-        stage.start();
+         stage.start();
-        */
+         */
     },
     'SHAPES - add stroke rect': function(containerId) {
         var stage = new Kinetic.Stage({