reverted Image shape. Image no longer extends rect because this was producing losses in performance and big losses in image quality when scaling the image

dist/kinetic-core.js

@@ -3469,61 +3469,80 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
 /**
  * Image constructor
  * @constructor
- * @augments Kinetic.Rect
+ * @augments Kinetic.Shape
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
     this.shapeType = "Image";
+    config.drawFunc = function() {
+        if(!!this.attrs.image) {
+            var width = !!this.attrs.width ? this.attrs.width : this.attrs.image.width;
+            var height = !!this.attrs.height ? this.attrs.height : this.attrs.image.height;
+            var canvas = this.getCanvas();
+            var context = this.getContext();
 
-    // call super constructor
+            context.beginPath();
-    Kinetic.Rect.apply(this, [config]);
+            context.rect(0, 0, width, height);
+            context.closePath();
+            this.fill();
+            this.stroke();
 
-    // update attrs when one of the following changes
+            // if cropping
-    this.on('widthChange', this._setAttrs);
+            if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
-    this.on('heightChange', this._setAttrs);
+                var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;
-    this.on('imageChange', this._setAttrs);
+                var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
-    this.on('cropChange', this._setAttrs);
+                var cropWidth = this.attrs.crop.width;
-
+                var cropHeight = this.attrs.crop.height;
-    this._setAttrs();
+                this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
-};
-
-Kinetic.Image.prototype = {
-    _setAttrs: function() {
-        var a = this.attrs;
-        if(a.image) {
-            if(!a.width) {
-                a.width = a.image.width;
-            }
-            if(!a.height) {
-                a.height = a.image.height;
-            }
-
-            var scale;
-            var offset;
-
-            if(a.crop) {
-                scale = [a.width / a.crop.width, a.height / a.crop.height];
-                offset = [-1 * a.crop.x, -1 * a.crop.y];
             }
+            // no cropping
             else {
-                scale = [a.width / a.image.width, a.height / a.image.height];
+                this.drawImage(this.attrs.image, 0, 0, width, height);
             }
-
-            this.setFill({
-                image: a.image,
-                repeat: 'no-repeat',
-                scale: scale,
-                offset: offset
-            });
         }
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Image methods
+ */
+Kinetic.Image.prototype = {
+    /**
+     * set width and height
+     */
+    setSize: function() {
+        var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments));
+        this.setAttrs(size);
+    },
+    /**
+     * return image size
+     */
+    getSize: function() {
+        return {
+            width: this.attrs.width,
+            height: this.attrs.height
+        };
     }
 };
-
+// extend Shape
-// extend Rect
+Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
-
 // add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
+Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
+
+/**
+ * set width
+ * @name setWidth
+ * @methodOf Kinetic.Image.prototype
+ * @param {Number} width
+ */
+
+/**
+ * set height
+ * @name setHeight
+ * @methodOf Kinetic.Image.prototype
+ * @param {Number} height
+ */
 
 /**
  * set image
@@ -3545,6 +3564,18 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
  * @methodOf Kinetic.Image.prototype
  */
 
+/**
+ * get width
+ * @name getWidth
+ * @methodOf Kinetic.Image.prototype
+ */
+
+/**
+ * get height
+ * @name getHeight
+ * @methodOf Kinetic.Image.prototype
+ */
+
 /**
  * get image
  * @name getImage

src/shapes/Image.js

@@ -4,61 +4,80 @@
 /**
  * Image constructor
  * @constructor
- * @augments Kinetic.Rect
+ * @augments Kinetic.Shape
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
     this.shapeType = "Image";
+    config.drawFunc = function() {
+        if(!!this.attrs.image) {
+            var width = !!this.attrs.width ? this.attrs.width : this.attrs.image.width;
+            var height = !!this.attrs.height ? this.attrs.height : this.attrs.image.height;
+            var canvas = this.getCanvas();
+            var context = this.getContext();
 
-    // call super constructor
+            context.beginPath();
-    Kinetic.Rect.apply(this, [config]);
+            context.rect(0, 0, width, height);
+            context.closePath();
+            this.fill();
+            this.stroke();
 
-    // update attrs when one of the following changes
+            // if cropping
-    this.on('widthChange', this._setAttrs);
+            if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
-    this.on('heightChange', this._setAttrs);
+                var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;
-    this.on('imageChange', this._setAttrs);
+                var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
-    this.on('cropChange', this._setAttrs);
+                var cropWidth = this.attrs.crop.width;
-
+                var cropHeight = this.attrs.crop.height;
-    this._setAttrs();
+                this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
-};
-
-Kinetic.Image.prototype = {
-    _setAttrs: function() {
-        var a = this.attrs;
-        if(a.image) {
-            if(!a.width) {
-                a.width = a.image.width;
-            }
-            if(!a.height) {
-                a.height = a.image.height;
-            }
-
-            var scale;
-            var offset;
-
-            if(a.crop) {
-                scale = [a.width / a.crop.width, a.height / a.crop.height];
-                offset = [-1 * a.crop.x, -1 * a.crop.y];
             }
+            // no cropping
             else {
-                scale = [a.width / a.image.width, a.height / a.image.height];
+                this.drawImage(this.attrs.image, 0, 0, width, height);
             }
-
-            this.setFill({
-                image: a.image,
-                repeat: 'no-repeat',
-                scale: scale,
-                offset: offset
-            });
         }
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Image methods
+ */
+Kinetic.Image.prototype = {
+    /**
+     * set width and height
+     */
+    setSize: function() {
+        var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments));
+        this.setAttrs(size);
+    },
+    /**
+     * return image size
+     */
+    getSize: function() {
+        return {
+            width: this.attrs.width,
+            height: this.attrs.height
+        };
     }
 };
-
+// extend Shape
-// extend Rect
+Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
-
 // add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
+Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
+
+/**
+ * set width
+ * @name setWidth
+ * @methodOf Kinetic.Image.prototype
+ * @param {Number} width
+ */
+
+/**
+ * set height
+ * @name setHeight
+ * @methodOf Kinetic.Image.prototype
+ * @param {Number} height
+ */
 
 /**
  * set image
@@ -80,6 +99,18 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
  * @methodOf Kinetic.Image.prototype
  */
 
+/**
+ * get width
+ * @name getWidth
+ * @methodOf Kinetic.Image.prototype
+ */
+
+/**
+ * get height
+ * @name getHeight
+ * @methodOf Kinetic.Image.prototype
+ */
+
 /**
  * get image
  * @name getImage