Permalink
Browse files

trying out Image extending Rect so that Image has Rect properties and…

… methods such as corner radius
  • Loading branch information...
1 parent c1a08d8 commit a8c09516baa75c2370495c6151496b0b6f758c23 @ericdrowell committed Jun 24, 2012
Showing with 106 additions and 165 deletions.
  1. +49 −79 dist/kinetic-core.js
  2. +2 −2 dist/kinetic-core.min.js
  3. +48 −78 src/shapes/Image.js
  4. +7 −6 tests/js/unitTests.js
View
@@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
- * Date: Jun 23 2012
+ * Date: Jun 24 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -3469,87 +3469,69 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
/**
* Image constructor
* @constructor
- * @augments Kinetic.Shape
+ * @augments Kinetic.Rect
* @param {Object} config
*/
Kinetic.Image = function(config) {
- this.setDefaultAttrs({
- crop: {
- x: 0,
- y: 0,
- }
+ this.shapeType = "Image";
+
+ // call super constructor
+ Kinetic.Rect.apply(this, [config]);
+
+ // update attrs when one of the following changes
+ this.on('widthChange', function() {
+ this._setAttrs();
+ });
+ this.on('heightChange', function() {
+ this._setAttrs();
+ });
+ this.on('imageChange', function() {
+ this._setAttrs();
+ });
+ this.on('cropChange', function() {
+ this._setAttrs();
});
- 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 cropX = this.attrs.crop.x;
- var cropY = this.attrs.crop.y;
- var cropWidth = this.attrs.crop.width;
- var cropHeight = this.attrs.crop.height;
- var canvas = this.getCanvas();
- var context = this.getContext();
+ this._setAttrs();
+};
- context.beginPath();
- context.rect(0, 0, width, height);
- context.closePath();
- this.fill();
- this.stroke();
+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 cropping
- if(!!cropWidth && !!cropHeight) {
- this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
+ if(a.crop) {
+ scale = [a.width / a.crop.width, a.height / a.crop.height];
+ offset = [-1 * a.crop.x, -7];
}
- // no cropping
else {
- this.drawImage(this.attrs.image, 0, 0, width, height);
+ scale = [a.width / a.image.width, a.height / a.image.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
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Image.prototype
- * @param {Number} width
- */
+// extend Rect
+Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Image.prototype
- * @param {Number} height
- */
+// add setters and getters
+Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
/**
* set image
@@ -3572,18 +3554,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
*/
/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
* get image
* @name getImage
* @methodOf Kinetic.Image.prototype
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -4,87 +4,69 @@
/**
* Image constructor
* @constructor
- * @augments Kinetic.Shape
+ * @augments Kinetic.Rect
* @param {Object} config
*/
Kinetic.Image = function(config) {
- this.setDefaultAttrs({
- crop: {
- x: 0,
- y: 0,
- }
+ this.shapeType = "Image";
+
+ // call super constructor
+ Kinetic.Rect.apply(this, [config]);
+
+ // update attrs when one of the following changes
+ this.on('widthChange', function() {
+ this._setAttrs();
+ });
+ this.on('heightChange', function() {
+ this._setAttrs();
+ });
+ this.on('imageChange', function() {
+ this._setAttrs();
+ });
+ this.on('cropChange', function() {
+ this._setAttrs();
});
- 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 cropX = this.attrs.crop.x;
- var cropY = this.attrs.crop.y;
- var cropWidth = this.attrs.crop.width;
- var cropHeight = this.attrs.crop.height;
- var canvas = this.getCanvas();
- var context = this.getContext();
+ this._setAttrs();
+};
+
+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;
+ }
- context.beginPath();
- context.rect(0, 0, width, height);
- context.closePath();
- this.fill();
- this.stroke();
+ var scale;
+ var offset;
- // if cropping
- if(!!cropWidth && !!cropHeight) {
- this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
+ if(a.crop) {
+ scale = [a.width / a.crop.width, a.height / a.crop.height];
+ offset = [-1 * a.crop.x, -7];
}
- // no cropping
else {
- this.drawImage(this.attrs.image, 0, 0, width, height);
+ scale = [a.width / a.image.width, a.height / a.image.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
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Image.prototype
- * @param {Number} width
- */
+// extend Rect
+Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Image.prototype
- * @param {Number} height
- */
+// add setters and getters
+Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
/**
* set image
@@ -107,18 +89,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
*/
/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
* get image
* @name getImage
* @methodOf Kinetic.Image.prototype
View
@@ -1816,7 +1816,8 @@ Test.prototype.tests = {
width: 100,
height: 100,
offset: [50, 30],
- crop: [20, 20, 200, 250]
+ crop: [135, 7, 167, 134],
+ cornerRadius: 20
});
layer.add(darth);
@@ -1832,10 +1833,10 @@ Test.prototype.tests = {
var crop = null;
crop = darth.getCrop();
- test(crop.x === 20, 'crop x should be 20');
- test(crop.y === 20, 'crop y should be 20');
- test(crop.width === 200, 'crop width should be 200');
- test(crop.height === 250, 'crop height should be 250');
+ test(crop.x === 135, 'crop x should be 135');
+ test(crop.y === 7, 'crop y should be 7');
+ test(crop.width === 167, 'crop width should be 167');
+ test(crop.height === 134, 'crop height should be134');
/*
* test cropping setter
@@ -1867,7 +1868,7 @@ Test.prototype.tests = {
test(crop.height === 11, 'crop height should be 11');
/*
- * test partial setter
+ * test crop partial setter
*/
darth.setCrop({
x: 12

0 comments on commit a8c0951

Please sign in to comment.