diff --git a/src/shapes/Image.js b/src/shapes/Image.js index a24a559c..43a3b0c7 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -12,6 +12,8 @@ Kinetic.Image = function(config) { if(this.attrs === undefined) { this.attrs = {}; } + this.attrs.cropX = 0; + this.attrs.cropY = 0; // special this.image = config.image; @@ -21,6 +23,8 @@ Kinetic.Image = function(config) { if(this.image !== undefined) { var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width; var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height; + var cropWidth = this.attrs.cropWidth !== undefined ? this.attrs.cropWidth : this.image.width; + var cropHeight = this.attrs.cropHeight !== undefined ? this.attrs.cropHeight : this.image.height; var canvas = this.getCanvas(); var context = this.getContext(); context.beginPath(); @@ -28,7 +32,7 @@ Kinetic.Image = function(config) { context.rect(0, 0, width, height); context.closePath(); this.fillStroke(); - context.drawImage(this.image, 0, 0, width, height); + context.drawImage(this.image,this.attrs.cropX, this.attrs.cropY, cropWidth, cropHeight, 0, 0, width, height); } }; // call super constructor @@ -94,6 +98,30 @@ Kinetic.Image.prototype = { width: this.attrs.width, height: this.attrs.height }; + }, + /** + * return cropping + */ + getCropping: function() { + return { + cropX: this.attrs.cropX, + cropY: this.attrs.cropY, + cropWidth: this.attrs.cropWidth, + cropHeight: this.attrs.cropHeight + }; + }, + /** + * set cropping + * @param {Number} cropX + * @param {Number} cropY + * @param {Number} cropWidth + * @param {Number} cropHeight + */ + setCropping: function() { + this.attrs.cropX = cropX; + this.attrs.cropY = cropY; + this.attrs.cropWidth = cropWidth; + this.attrs.cropHeight = cropHeight; } }; // extend Shape