diff --git a/src/Canvas.js b/src/Canvas.js index 1555572c..858b8e52 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -222,11 +222,16 @@ this.context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); }, _clip: function(container) { - var context = this.getContext(); + var context = this.getContext(), + clipX = container.getClipX() || 0, + clipY = container.getClipY() || 0, + clipWidth = container.getClipWidth(), + clipHeight = container.getClipHeight(); + context.save(); this._applyAncestorTransforms(container); context.beginPath(); - container.getClipFunc()(this); + context.rect(clipX, clipY, clipWidth, clipHeight); context.clip(); context.setTransform(1, 0, 0, 1, 0, 0); } diff --git a/src/Container.js b/src/Container.js index eeb1ff11..656e0f64 100644 --- a/src/Container.js +++ b/src/Container.js @@ -242,7 +242,7 @@ }, drawScene: function(canvas) { var layer = this.getLayer(), - clip = !!this.getClipFunc(), + clip = this.getClipWidth() && this.getClipHeight(), children, n, len; if (!canvas && layer) { @@ -269,7 +269,7 @@ return this; }, drawHit: function() { - var clip = !!this.getClipFunc() && this.nodeType !== 'Stage', + var clip = this.getClipWidth() && this.getClipHeight() && this.nodeType !== 'Stage', n = 0, len = 0, children = [], @@ -299,20 +299,93 @@ Kinetic.Util.extend(Kinetic.Container, Kinetic.Node); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipFunc'); + Kinetic.Factory.addBoxGetterSetter(Kinetic.Container, 'clip'); /** - * set clipping function - * @name setClipFunc + * set clip + * @method + * @name setClip + * @memberof Kinetic.Container.prototype + * @param {Object|Array} + * @example + * // set clip x, y, width and height with an array
+ * image.setClip([20, 20, 100, 100]);

+ * + * // set clip x, y, width and height with an object
+ * image.setClip({
+ * x: 20,
+ * y: 20,
+ * width: 20,
+ * height: 20
+ * }); + */ + + /** + * set clipX + * @method + * @name setClipX + * @memberof Kinetic.Container.prototype + * @param {Number} x + */ + + /** + * set clipY + * @name setClipY * @method * @memberof Kinetic.Container.prototype - * @param {Number} deg + * @param {Number} y + */ + + /** + * set clipWidth + * @name setClipWidth + * @method + * @memberof Kinetic.Container.prototype + * @param {Number} width + */ + + /** + * set clipHeight + * @name setClipHeight + * @method + * @memberof Kinetic.Container.prototype + * @param {Number} height */ /** - * get clipping function - * @name getClipFunc + * get clip + * @name getClip + * @method + * @memberof Kinetic.Container.prototype + * @return {Object} + */ + + /** + * get clip x + * @name getClipX * @method * @memberof Kinetic.Container.prototype */ + + /** + * get clip y + * @name getClipY + * @method + * @memberof Kinetic.Container.prototype + */ + + /** + * get clip width + * @name getClipWidth + * @method + * @memberof Kinetic.Container.prototype + */ + + /** + * get clip height + * @name getClipHeight + * @method + * @memberof Kinetic.Container.prototype + */ + })(); diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js index c2b0886a..60da2c82 100644 --- a/tests/js/manualTests.js +++ b/tests/js/manualTests.js @@ -47,6 +47,54 @@ Test.Modules.Tween = { tween.reverse(); }); + }, + '*tween clipping region': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer({ + clipX: 0, + clipY: 0, + clipWidth: 150, + clipHeight: 100 + }); + + var spline = new Kinetic.Spline({ + points: [ + 73, 160, + 340, 23, + 500, 109, + 300, 109 + ], + stroke: 'blue', + strokeWidth: 10, + lineCap: 'round', + lineJoin: 'round', + draggable: true, + tension: 1 + }); + + layer.add(spline); + stage.add(layer); + + var tween = new Kinetic.Tween({ + node: layer, + duration: 1, + clipWidth: 500, + clipHeight: 200, + easing: Kinetic.Easings.BackEaseOut + }); + + stage.getContent().addEventListener('mouseover', function() { + tween.play(); + }); + + stage.getContent().addEventListener('mouseout', function() { + tween.reverse(); + }); + }, 'ease-in, ease-out, ease-in-out hovers': function(containerId) { var stage = new Kinetic.Stage({