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({