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 diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index e103df10..c515cbd7 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -14,6 +14,7 @@ Kinetic.Rect = function(config) { } this.attrs.width = 0; this.attrs.height = 0; + this.attrs.cornerRadius = 0; this.shapeType = "Rect"; @@ -21,7 +22,22 @@ Kinetic.Rect = function(config) { var context = this.getContext(); context.beginPath(); this.applyLineJoin(); - context.rect(0, 0, this.attrs.width, this.attrs.height); + if (this.attrs.cornerRadius === 0) { + // simple rect - don't bother doing all that complicated maths stuff. + context.rect(0, 0, this.attrs.width, this.attrs.height); + } + else { + // arcTo would be nicer, but browser support is patchy (Opera) + context.moveTo(this.attrs.cornerRadius, 0); + context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0); + context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI*3/2, 0, false); + context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius); + context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI/2, false); + context.lineTo(this.attrs.cornerRadius, this.attrs.height); + context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI/2, Math.PI, false); + context.lineTo(0, this.attrs.cornerRadius); + context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI*3/2, false); + } context.closePath(); this.fillStroke(); }; @@ -75,7 +91,20 @@ Kinetic.Rect.prototype = { width: this.attrs.width, height: this.attrs.height }; - } + }, + /** + * set corner radius + * @param {Number} radius + */ + setCornerRadius: function(radius) { + this.attrs.cornerRadius = radius; + }, + /** + * get corner radius + */ + getCornerRadius: function() { + return this.attrs.cornerRadius; + }, }; // extend Shape