diff --git a/src/shapes/Image.js b/src/shapes/Image.js
index 8f7d338e..cc89bfe6 100644
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -271,18 +271,15 @@
* @returns {ImageObject}
*/
- Kinetic.Factory.addBoxGetterSetter(Kinetic.Image, 'crop');
+ Kinetic.Factory.addGetterSetter(Kinetic.Image, 'crop');
/**
* set crop
* @method
* @name setCrop
* @memberof Kinetic.Image.prototype
- * @param {Object|Array}
+ * @param {Object} crop {x: x, y: y, width: width, height: height}
* @example
- * // set crop x, y, width and height with an array
- * image.setCrop([20, 20, 100, 100]);
- *
- * // set crop x, y, width and height with an object
+ * // set crop x, y, width and height
* image.setCrop({
* x: 20,
* y: 20,
@@ -291,38 +288,6 @@
* });
*/
- /**
- * set cropX
- * @method
- * @name setCropX
- * @memberof Kinetic.Image.prototype
- * @param {Number} x
- */
-
- /**
- * set cropY
- * @name setCropY
- * @method
- * @memberof Kinetic.Image.prototype
- * @param {Number} y
- */
-
- /**
- * set cropWidth
- * @name setCropWidth
- * @method
- * @memberof Kinetic.Image.prototype
- * @param {Number} width
- */
-
- /**
- * set cropHeight
- * @name setCropHeight
- * @method
- * @memberof Kinetic.Image.prototype
- * @param {Number} height
- */
-
/**
* get crop
* @name getCrop
@@ -331,6 +296,15 @@
* @returns {Object}
*/
+ Kinetic.Factory.addComponentGetterSetter(Kinetic.Image, 'crop', 'x', 0);
+ /**
+ * set crop x
+ * @method
+ * @name setCropX
+ * @memberof Kinetic.Image.prototype
+ * @param {Number} x
+ */
+
/**
* get crop x
* @name getCropX
@@ -339,6 +313,15 @@
* @returns {Number}
*/
+ Kinetic.Factory.addComponentGetterSetter(Kinetic.Image, 'crop', 'y', 0);
+ /**
+ * set crop y
+ * @name setCropY
+ * @method
+ * @memberof Kinetic.Image.prototype
+ * @param {Number} y
+ */
+
/**
* get crop y
* @name getCropY
@@ -347,6 +330,15 @@
* @returns {Number}
*/
+ Kinetic.Factory.addComponentGetterSetter(Kinetic.Image, 'crop', 'width', 0);
+ /**
+ * set cropWidth
+ * @name setCropWidth
+ * @method
+ * @memberof Kinetic.Image.prototype
+ * @param {Number} width
+ */
+
/**
* get crop width
* @name getCropWidth
@@ -355,6 +347,15 @@
* @returns {Number}
*/
+ Kinetic.Factory.addComponentGetterSetter(Kinetic.Image, 'crop', 'height', 0);
+ /**
+ * set cropHeight
+ * @name setCropHeight
+ * @method
+ * @memberof Kinetic.Image.prototype
+ * @param {Number} height
+ */
+
/**
* get crop height
* @name getCropHeight
diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js
index 25a2ee1a..a71acef9 100644
--- a/test/unit/shapes/Image-test.js
+++ b/test/unit/shapes/Image-test.js
@@ -13,8 +13,8 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: [50, 30],
- crop: [135, 7, 167, 134],
+ offset: {x: 50, y: 30},
+ crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -42,20 +42,6 @@ suite('Image', function(){
assert.equal(crop.width, 167);
assert.equal(crop.height, 134);
- darth.setCrop(0, 1, 2, 3);
- crop = darth.getCrop();
- assert.equal(crop.x, 0);
- assert.equal(crop.y, 1);
- assert.equal(crop.width, 2);
- assert.equal(crop.height, 3);
-
- darth.setCrop([4, 5, 6, 7]);
- crop = darth.getCrop();
- assert.equal(crop.x, 4);
- assert.equal(crop.y, 5);
- assert.equal(crop.width, 6);
- assert.equal(crop.height, 7);
-
darth.setCrop({
x: 8,
y: 9,
@@ -68,36 +54,28 @@ suite('Image', function(){
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
- darth.setCrop({
- x: 12
- });
+ darth.setCropX(12);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 9);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
- darth.setCrop({
- y: 13
- });
+ darth.setCropY(13);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
- darth.setCrop({
- width: 14
- });
+ darth.setCropWidth(14);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 14);
assert.equal(crop.height, 11);
- darth.setCrop({
- height: 15
- });
+ darth.setCropHeight(15);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
@@ -111,7 +89,7 @@ suite('Image', function(){
width: 100,
height: 100,
offset: [50, 30],
- crop: [135, 7, 167, 134],
+ crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -142,7 +120,7 @@ suite('Image', function(){
image: imageObj,
width: 107,
height: 75,
- crop: [186, 211, 106, 74],
+ crop: {x:186, y:211, width:106, height:74},
draggable: true,
scale: [0.5, 0.5]
});
@@ -161,7 +139,7 @@ suite('Image', function(){
assert.equal(darth.getCropWidth(), 106);
assert.equal(darth.getCropHeight(), 74);
- darth.setCrop([1, 2, 3, 4]);
+ darth.setCrop({x: 1, y: 2, width: 3, height: 4});
assert.equal(darth.getCrop().x, 1);
assert.equal(darth.getCrop().y, 2);
@@ -323,13 +301,13 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: [50, 30],
+ offset: {x: 50, y:30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
- shadowOffset: 20
+ shadowOffset: {x: 20, y:20}
});
layer.add(darth);
@@ -337,7 +315,7 @@ suite('Image', function(){
var trace = layer.getContext().getTrace();
//console.log(trace);
- assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,438,300,0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,438,300,0,0,100,100);restore();');
+ assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();');
done();
@@ -358,13 +336,13 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: [50, 30],
+ offset: {x: 50, y: 30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
- shadowOffset: 20,
+ shadowOffset: {x:20, y:20},
stroke: 'red',
strokeWidth: 20
});