2012-03-07 13:45:48 +08:00
|
|
|
///////////////////////////////////////////////////////////////////////
|
|
|
|
// Image
|
|
|
|
///////////////////////////////////////////////////////////////////////
|
|
|
|
/**
|
|
|
|
* Image constructor
|
|
|
|
* @constructor
|
2012-07-02 07:48:04 +08:00
|
|
|
* @augments Kinetic.Shape
|
2012-03-07 13:45:48 +08:00
|
|
|
* @param {Object} config
|
|
|
|
*/
|
|
|
|
Kinetic.Image = function(config) {
|
2012-06-25 03:44:08 +08:00
|
|
|
this.shapeType = "Image";
|
2012-07-02 07:48:04 +08:00
|
|
|
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();
|
2012-06-25 03:44:08 +08:00
|
|
|
|
2012-07-02 07:48:04 +08:00
|
|
|
context.beginPath();
|
|
|
|
context.rect(0, 0, width, height);
|
|
|
|
context.closePath();
|
|
|
|
this.fill();
|
|
|
|
this.stroke();
|
2012-06-25 03:44:08 +08:00
|
|
|
|
2012-07-02 07:48:04 +08:00
|
|
|
// if cropping
|
|
|
|
if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
|
|
|
|
var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;
|
|
|
|
var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
|
|
|
|
var cropWidth = this.attrs.crop.width;
|
|
|
|
var cropHeight = this.attrs.crop.height;
|
|
|
|
this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
|
2012-04-28 10:08:45 +08:00
|
|
|
}
|
2012-07-02 07:48:04 +08:00
|
|
|
// no cropping
|
2012-04-28 10:08:45 +08:00
|
|
|
else {
|
2012-07-02 07:48:04 +08:00
|
|
|
this.drawImage(this.attrs.image, 0, 0, width, height);
|
2012-04-28 10:08:45 +08:00
|
|
|
}
|
2012-04-08 10:08:16 +08:00
|
|
|
}
|
2012-07-02 07:48:04 +08:00
|
|
|
};
|
|
|
|
// 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
|
|
|
|
};
|
2012-03-07 13:45:48 +08:00
|
|
|
}
|
|
|
|
};
|
2012-07-02 07:48:04 +08:00
|
|
|
// extend Shape
|
|
|
|
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
|
|
|
|
// add setters and getters
|
|
|
|
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
|
2012-06-11 04:07:09 +08:00
|
|
|
|
2012-07-02 07:48:04 +08:00
|
|
|
/**
|
|
|
|
* set width
|
|
|
|
* @name setWidth
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
|
|
|
* @param {Number} width
|
|
|
|
*/
|
2012-06-11 04:07:09 +08:00
|
|
|
|
2012-07-02 07:48:04 +08:00
|
|
|
/**
|
|
|
|
* set height
|
|
|
|
* @name setHeight
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
|
|
|
* @param {Number} height
|
|
|
|
*/
|
2012-06-11 04:07:09 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* set image
|
2012-06-14 17:19:51 +08:00
|
|
|
* @name setImage
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
2012-06-11 04:07:09 +08:00
|
|
|
* @param {ImageObject} image
|
|
|
|
*/
|
|
|
|
|
2012-06-24 09:09:10 +08:00
|
|
|
/**
|
|
|
|
* set crop
|
|
|
|
* @name setCrop
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
|
|
|
* @param {Object} config
|
|
|
|
*/
|
|
|
|
|
2012-06-11 04:07:09 +08:00
|
|
|
/**
|
|
|
|
* get crop
|
2012-06-14 17:19:51 +08:00
|
|
|
* @name getCrop
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
2012-06-11 04:07:09 +08:00
|
|
|
*/
|
|
|
|
|
2012-07-02 07:48:04 +08:00
|
|
|
/**
|
|
|
|
* get width
|
|
|
|
* @name getWidth
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* get height
|
|
|
|
* @name getHeight
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
|
|
|
*/
|
|
|
|
|
2012-06-11 04:07:09 +08:00
|
|
|
/**
|
|
|
|
* get image
|
2012-06-14 17:19:51 +08:00
|
|
|
* @name getImage
|
|
|
|
* @methodOf Kinetic.Image.prototype
|
2012-06-11 04:07:09 +08:00
|
|
|
*/
|