Merge branch 'master' of github.com:ericdrowell/KineticJS

src/Canvas.js

@@ -16,6 +16,10 @@
         this.width = width;
         this.height = height;
         this.element = document.createElement('canvas');
+        this.element.style.padding = 0;
+        this.element.style.margin = 0;
+        this.element.style.border = 0;
+        this.element.style.background = 'transparent';
         this.context = this.element.getContext('2d');
         this.setSize(width || 0, height || 0);
     };
@@ -200,6 +204,15 @@
                 var t = no.getTransform(), m = t.getMatrix();
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }, true);
+        },
+        _clip: function(container) {
+            var context = this.getContext(); 
+            context.save();
+            this._applyAncestorTransforms(container);
+            context.beginPath(); 
+            container.getClipFunc()(this);
+            context.clip();
+            context.setTransform(1, 0, 0, 1, 0, 0);
         }
     };
 

src/Container.js

@@ -5,6 +5,7 @@
      * @augments Kinetic.Node
      * @param {Object} config
      * {{NodeParams}}
+     * {{ContainerParams}}
      */
     Kinetic.Container = function(config) {
         this._containerInit(config);
@@ -203,21 +204,56 @@
             this.drawHit();
         },
         drawScene: function(canvas) {
+            var clip = !!this.getClipFunc() && canvas;
+
+            if (clip) {
+                canvas._clip(this);
+            }
             if(this.isVisible()) {
                 var children = this.children, len = children.length;
                 for(var n = 0; n < len; n++) {
                     children[n].drawScene(canvas);
                 }
             }
+            if (clip) {
+                canvas.getContext().restore();
+            }
         },
         drawHit: function() {
+            var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
+                hitCanvas;
+
+            if (clip) {
+                hitCanvas = this.getLayer().hitCanvas; 
+                hitCanvas._clip(this);
+            }
             if(this.isVisible() && this.isListening()) {
                 var children = this.children, len = children.length;
                 for(var n = 0; n < len; n++) {
                     children[n].drawHit();
                 }
             }
+            if (clip) {
+                hitCanvas.getContext().restore();
+            }
         }
     };
+
     Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
+
+    // add getters setters
+    Kinetic.Node.addGettersSetters(Kinetic.Container, ['clipFunc']);
+
+    /**
+     * set clipping function 
+     * @name setClipFunc
+     * @methodOf Kinetic.Container.prototype
+     * @param {Number} deg
+     */
+
+    /**
+     * get clipping function 
+     * @name getClipFunc
+     * @methodOf Kinetic.Container.prototype
+     */
 })();

src/Group.js

@@ -5,6 +5,7 @@
      * @augments Kinetic.Container
      * @param {Object} config
      * {{NodeParams}}
+     * {{ContainerParams}}
      */
     Kinetic.Group = function(config) {
         this._initGroup(config);

src/Layer.js

@@ -8,6 +8,7 @@
      * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
      * to clear the canvas before each layer draw.  The default value is true.
      * {{NodeParams}}
+     * {{ContainerParams}}
      */
     Kinetic.Layer = function(config) {
         this._initLayer(config);

src/Stage.js

@@ -6,6 +6,7 @@
      * @param {Object} config
      * @param {String|DomElement} config.container Container id or DOM element
      * {{NodeParams}}
+     * {{ContainerParams}}
      */
     Kinetic.Stage = function(config) {
         this._initStage(config);