mirror of
https://github.com/konvajs/konva.git
synced 2025-05-02 20:05:08 +08:00
trying out Image extending Rect so that Image has Rect properties and methods such as corner radius
This commit is contained in:
Eric Rowell
parent
c1a08d8073
commit
a8c09516ba
138
dist/kinetic-core.js
vendored
138
dist/kinetic-core.js
vendored
@ -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();
|
||||
|
||||
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]);
|
||||
this._setAttrs();
|
||||
};
|
||||
/*
|
||||
* 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
|
||||
};
|
||||
_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, -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
|
||||
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
|
||||
*/
|
||||
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
|
||||
|
||||
/**
|
||||
* set image
|
||||
@ -3571,18 +3553,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get image
|
||||
* @name getImage
|
||||
|
||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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();
|
||||
|
||||
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]);
|
||||
this._setAttrs();
|
||||
};
|
||||
/*
|
||||
* 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
|
||||
};
|
||||
_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, -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
|
||||
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
|
||||
*/
|
||||
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['image', 'crop']);
|
||||
|
||||
/**
|
||||
* set image
|
||||
@ -106,18 +88,6 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get image
|
||||
* @name getImage
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user