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

added new crop methods

Browse Source
This commit is contained in:
Eric Rowell
2013-08-10 20:30:25 -07:00
parent b8e3f10d3a
commit db98fec243
3 changed files with 193 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/Node.js
View File

@@ -32,7 +32,9 @@
TRANSFORM = 'transform',
UPPER_B = 'B',
UPPER_G = 'G',
UPPER_HEIGHT = 'Height',
UPPER_R = 'R',
UPPER_WIDTH = 'Width',
UPPER_X = 'X',
UPPER_Y = 'Y',
VISIBLE = 'visible',
@@ -1277,6 +1279,21 @@
this.addSetter(constructor, attr + UPPER_X);
this.addSetter(constructor, attr + UPPER_Y);
};
Kinetic.Node.addBoxGetterSetter = function(constructor, attr, def) {
this.addBoxGetter(constructor, attr, def);
this.addBoxSetter(constructor, attr);
// add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def);
this.addGetter(constructor, attr + UPPER_Y, def);
this.addGetter(constructor, attr + UPPER_WIDTH, def);
this.addGetter(constructor, attr + UPPER_HEIGHT, def);
this.addSetter(constructor, attr + UPPER_X);
this.addSetter(constructor, attr + UPPER_Y);
this.addSetter(constructor, attr + UPPER_WIDTH);
this.addSetter(constructor, attr + UPPER_HEIGHT);
};
Kinetic.Node.addPointsGetterSetter = function(constructor, attr) {
this.addPointsGetter(constructor, attr);
this.addPointsSetter(constructor, attr);
@@ -1322,7 +1339,7 @@
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(arg) {
constructor.prototype[method] = function() {
var val = this.attrs[attr];
return val === undefined ? [] : val;
};
@@ -1340,7 +1357,7 @@
var that = this,
baseMethod = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function(arg) {
constructor.prototype[baseMethod] = function() {
var that = this;
return {
x: that[baseMethod + UPPER_X](),
@@ -1348,6 +1365,20 @@
};
};
};
Kinetic.Node.addBoxGetter = function(constructor, attr) {
var that = this,
baseMethod = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function() {
var that = this;
return {
x: that[baseMethod + UPPER_X](),
y: that[baseMethod + UPPER_Y](),
width: that[baseMethod + UPPER_WIDTH](),
height: that[baseMethod + UPPER_HEIGHT]()
};
};
};
Kinetic.Node.addRotationGetter = function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
@@ -1431,6 +1462,41 @@
}
};
};
Kinetic.Node.addBoxSetter = function(constructor, attr) {
var that = this,
baseMethod = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function() {
var config = [].slice.call(arguments),
pos = Kinetic.Util._getXY(config),
size = Kinetic.Util._getSize(config),
both = Kinetic.Util._merge(pos, size),
oldVal = this.attrs[attr],
x, y, width, height;
if (both) {
x = both.x;
y = both.y;
width = both.width;
height = both.height;
this._fireBeforeChangeEvent(attr, oldVal, both);
if (x !== undefined) {
this[baseMethod + UPPER_X](x);
}
if (y !== undefined) {
this[baseMethod + UPPER_Y](y);
}
if (width !== undefined) {
this[baseMethod + UPPER_WIDTH](width);
}
if (height !== undefined) {
this[baseMethod + UPPER_HEIGHT](height);
}
this._fireChangeEvent(attr, oldVal, both);
}
};
};
Kinetic.Node.addRotationSetter = function(constructor, attr) {
var that = this,
method = SET + Kinetic.Util._capitalize(attr);

112
src/shapes/Image.js
View File

@@ -45,8 +45,11 @@
params,
that = this,
context = canvas.getContext(),
crop = this.getCrop(),
cropX, cropY, cropWidth, cropHeight, image;
cropX = this.getCropX() || 0,
cropY = this.getCropY() || 0,
cropWidth = this.getCropWidth(),
cropHeight = this.getCropHeight(),
image;
// if a filter is set, and the filter needs to be updated, reapply
if (this.getFilter() && this._applyFilter) {
@@ -69,11 +72,7 @@
if(image) {
// if cropping
if(crop) {
cropX = crop.x || 0;
cropY = crop.y || 0;
cropWidth = crop.width || 0;
cropHeight = crop.height || 0;
if(cropWidth && cropHeight) {
params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
}
// no cropping
@@ -151,24 +150,6 @@
this.filterCanvas = null;
this._applyFilter = false;
},
/**
* set crop
* @method
* @memberof Kinetic.Image.prototype
* @param {Object|Array} config
* @param {Number} config.x
* @param {Number} config.y
* @param {Number} config.width
* @param {Number} config.height
*/
setCrop: function() {
var config = [].slice.call(arguments),
pos = Kinetic.Util._getXY(config),
size = Kinetic.Util._getSize(config),
both = Kinetic.Util._merge(pos, size);
this._setAttr(CROP, Kinetic.Util._merge(both, this.getCrop()));
},
/**
* create image hit region which enables more accurate hit detection mapping of the image
* by avoiding event detections for transparent pixels
@@ -277,13 +258,92 @@
* @memberof Kinetic.Image.prototype
*/
Kinetic.Node.addGetter(Kinetic.Image, 'crop');
Kinetic.Node.addBoxGetterSetter(Kinetic.Image, 'crop');
/**
* set crop
* @method
* @name setCrop
* @memberof Kinetic.Image.prototype
* @param {Object|Array}
* @example
* // set crop x, y, width and height with an array<br>
* image.setCrop([20, 20, 100, 100]);<br><br>
*
* // set crop x, y, width and height with an object<br>
* image.setCrop({<br>
* x: 20,<br>
* y: 20,<br>
* width: 20,<br>
* height: 20<br>
* });
*/
/**
* set cropX
* @method
* @name setCropX
* @memberof Kinetic.Image.prototype
* @param {Number} x
*/
/**
* set cropY
* @name setCropY
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} y
*/
/**
* set cropWidth
* @name setCropWidth
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} width
*/
/**
* set cropHeight
* @name setCropHeight
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} height
*/
/**
* get crop
* @name getCrop
* @method
* @memberof Kinetic.Image.prototype
* @return {Object}
*/
/**
* get crop x
* @name getCropX
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get crop y
* @name getCropY
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get crop width
* @name getCropWidth
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get crop height
* @name getCropHeight
* @method
* @memberof Kinetic.Image.prototype
*/
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filter');

41
tests/js/unit/shapes/imageTests.js
View File

@@ -123,7 +123,7 @@ Test.Modules.IMAGE = {
};
imageObj.src = '../assets/darth-vader.jpg';
},
'crop add and scale image': function(containerId) {
'crop and scale image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
@@ -138,14 +138,51 @@ Test.Modules.IMAGE = {
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 292 - 186, 285 - 211],
crop: [186, 211, 106, 74],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
stage.add(layer);
test(darth.getCrop().x === 186, 'crop x should be 186');
test(darth.getCrop().y === 211, 'crop y should be 211');
test(darth.getCrop().width === 106, 'crop width should be 106');
test(darth.getCrop().height === 74, 'crop height should be 74');
test(darth.getCropX() === 186, 'crop x should be 186');
test(darth.getCropY() === 211, 'crop y should be 211');
test(darth.getCropWidth() === 106, 'crop width should be 106');
test(darth.getCropHeight() === 74, 'crop height should be 74');
darth.setCrop([1, 2, 3, 4]);
test(darth.getCrop().x === 1, 'crop x should be 1');
test(darth.getCrop().y === 2, 'crop y should be 2');
test(darth.getCrop().width === 3, 'crop width should be 3');
test(darth.getCrop().height === 4, 'crop height should be 4');
test(darth.getCropX() === 1, 'crop x should be 1');
test(darth.getCropY() === 2, 'crop y should be 2');
test(darth.getCropWidth() === 3, 'crop width should be 3');
test(darth.getCropHeight() === 4, 'crop height should be 4');
darth.setCropX(5);
darth.setCropY(6);
darth.setCropWidth(7);
darth.setCropHeight(8);
test(darth.getCrop().x === 5, 'crop x should be 5');
test(darth.getCrop().y === 6, 'crop y should be 6');
test(darth.getCrop().width === 7, 'crop width should be 7');
test(darth.getCrop().height === 8, 'crop height should be 8');
test(darth.getCropX() === 5, 'crop x should be 5');
test(darth.getCropY() === 6, 'crop y should be 6');
test(darth.getCropWidth() === 7, 'crop width should be 7');
test(darth.getCropHeight() === 8, 'crop height should be 8');
};
imageObj.src = '../assets/darth-vader.jpg';