lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-05-03 20:48:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

trying out Image extending Rect so that Image has Rect properties and methods such as corner radius

Browse Source
This commit is contained in:
Eric Rowell 2012-06-24 12:44:08 -07:00
parent c1a08d8073
commit a8c09516ba
4 changed files with 116 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 23 2012 * Date: Jun 24 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -3469,87 +3469,69 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
/** /**
* Image constructor * Image constructor
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Rect
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Image = function(config) { Kinetic.Image = function(config) {
this.setDefaultAttrs({ this.shapeType = "Image";
crop: {
x: 0, // call super constructor
y: 0, 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"; this._setAttrs();
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();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
this.fill();
this.stroke();
// if cropping
if(!!cropWidth && !!cropHeight) {
this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
}
// no cropping
else {
this.drawImage(this.attrs.image, 0, 0, width, height);
}
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
}; };
/*
* Image methods
*/
Kinetic.Image.prototype = { Kinetic.Image.prototype = {
/** _setAttrs: function() {
* set width and height var a = this.attrs;
*/ if(a.image) {
setSize: function() { if(!a.width) {
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); a.width = a.image.width;
this.setAttrs(size); }
}, if(!a.height) {
/** a.height = a.image.height;
* return image size }
*/
getSize: function() { var scale;
return { var offset;
width: this.attrs.width,
height: this.attrs.height if(a.crop) {
}; scale = [a.width / a.crop.width, a.height / a.crop.height];
offset = [-1 * a.crop.x, -7];
}
else {
scale = [a.width / a.image.width, a.height / a.image.height];
}
this.setFill({
image: a.image,
repeat: 'no-repeat',
scale: scale,
offset: offset
});
}
} }
}; };
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape); // extend Rect
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
// add setters and getters // add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']); Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['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 * set image
@ -3571,18 +3553,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
* @methodOf Kinetic.Image.prototype * @methodOf Kinetic.Image.prototype
*/ */
/**
* get width
* @name getWidth
* @methodOf Kinetic.Image.prototype
*/
/**
* get height
* @name getHeight
* @methodOf Kinetic.Image.prototype
*/
/** /**
* get image * get image
* @name getImage * @name getImage

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

136
src/shapes/Image.js
View File

@ -4,87 +4,69 @@
/** /**
* Image constructor * Image constructor
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Rect
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Image = function(config) { Kinetic.Image = function(config) {
this.setDefaultAttrs({ this.shapeType = "Image";
crop: {
x: 0, // call super constructor
y: 0, 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"; this._setAttrs();
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();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
this.fill();
this.stroke();
// if cropping
if(!!cropWidth && !!cropHeight) {
this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
}
// no cropping
else {
this.drawImage(this.attrs.image, 0, 0, width, height);
}
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
}; };
/*
* Image methods
*/
Kinetic.Image.prototype = { Kinetic.Image.prototype = {
/** _setAttrs: function() {
* set width and height var a = this.attrs;
*/ if(a.image) {
setSize: function() { if(!a.width) {
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); a.width = a.image.width;
this.setAttrs(size); }
}, if(!a.height) {
/** a.height = a.image.height;
* return image size }
*/
getSize: function() { var scale;
return { var offset;
width: this.attrs.width,
height: this.attrs.height if(a.crop) {
}; scale = [a.width / a.crop.width, a.height / a.crop.height];
offset = [-1 * a.crop.x, -7];
}
else {
scale = [a.width / a.image.width, a.height / a.image.height];
}
this.setFill({
image: a.image,
repeat: 'no-repeat',
scale: scale,
offset: offset
});
}
} }
}; };
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape); // extend Rect
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Rect);
// add setters and getters // add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']); Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['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 * set image
@ -106,18 +88,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
* @methodOf Kinetic.Image.prototype * @methodOf Kinetic.Image.prototype
*/ */
/**
* get width
* @name getWidth
* @methodOf Kinetic.Image.prototype
*/
/**
* get height
* @name getHeight
* @methodOf Kinetic.Image.prototype
*/
/** /**
* get image * get image
* @name getImage * @name getImage

13
tests/js/unitTests.js
View File

@ -1816,7 +1816,8 @@ Test.prototype.tests = {
width: 100, width: 100,
height: 100, height: 100,
offset: [50, 30], offset: [50, 30],
crop: [20, 20, 200, 250] crop: [135, 7, 167, 134],
cornerRadius: 20
}); });
layer.add(darth); layer.add(darth);
@ -1832,10 +1833,10 @@ Test.prototype.tests = {
var crop = null; var crop = null;
crop = darth.getCrop(); crop = darth.getCrop();
test(crop.x === 20, 'crop x should be 20'); test(crop.x === 135, 'crop x should be 135');
test(crop.y === 20, 'crop y should be 20'); test(crop.y === 7, 'crop y should be 7');
test(crop.width === 200, 'crop width should be 200'); test(crop.width === 167, 'crop width should be 167');
test(crop.height === 250, 'crop height should be 250'); test(crop.height === 134, 'crop height should be134');
/* /*
* test cropping setter * test cropping setter
@ -1867,7 +1868,7 @@ Test.prototype.tests = {
test(crop.height === 11, 'crop height should be 11'); test(crop.height === 11, 'crop height should be 11');
/* /*
* test partial setter * test crop partial setter
*/ */
darth.setCrop({ darth.setCrop({
x: 12 x: 12