Merge pull request #16 from lewispeckover/master

Rounded corners for Rect

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

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