mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
Rect tests are now passing
This commit is contained in:
Eric Rowell
parent
9c3be4bb05
commit
722ae82f21
@ -42,29 +42,21 @@
|
||||
Y = 'y';
|
||||
|
||||
Kinetic.Factory = {
|
||||
addGetterSetter: function() {
|
||||
var constructor = arguments[0],
|
||||
baseAttr = arguments[1],
|
||||
util = Kinetic.Util,
|
||||
def, component, index;
|
||||
addGetterSetter: function(constructor, baseAttr, def) {
|
||||
var util = Kinetic.Util
|
||||
|
||||
// base method
|
||||
if (arguments.length <= 3) {
|
||||
def = arguments[2];
|
||||
if (util._isArray(def)) {
|
||||
def = util.cloneArray(def);
|
||||
}
|
||||
this.addGetter(constructor, baseAttr, def);
|
||||
this.addSetter(constructor, baseAttr);
|
||||
if (util._isArray(def)) {
|
||||
def = util.cloneArray(def);
|
||||
}
|
||||
// component method
|
||||
else {
|
||||
component = arguments[2];
|
||||
index = arguments[3];
|
||||
def = arguments[4];
|
||||
this.addComponentGetter(constructor, baseAttr, component, index, def);
|
||||
this.addComponentSetter(constructor, baseAttr, component, index);
|
||||
else if (util._isObject(def)) {
|
||||
def = util.cloneObject(def);
|
||||
}
|
||||
this.addGetter(constructor, baseAttr, def);
|
||||
this.addSetter(constructor, baseAttr);
|
||||
},
|
||||
addComponentGetterSetter: function(constructor, baseAttr, component, def) {
|
||||
this.addComponentGetter(constructor, baseAttr, component, def);
|
||||
this.addComponentSetter(constructor, baseAttr, component);
|
||||
},
|
||||
addGetter: function(constructor, baseAttr, def) {
|
||||
var method = GET + Kinetic.Util._capitalize(baseAttr);
|
||||
@ -81,20 +73,20 @@
|
||||
this._setAttr(baseAttr, val);
|
||||
};
|
||||
},
|
||||
addComponentGetter: function(constructor, baseAttr, component, index, def) {
|
||||
addComponentGetter: function(constructor, baseAttr, component, def) {
|
||||
var method = GET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
|
||||
|
||||
constructor.prototype[method] = function() {
|
||||
var base = this.attrs[baseAttr],
|
||||
val = base && base[index];
|
||||
val = base && base[component];
|
||||
return val === undefined ? def : val;
|
||||
};
|
||||
},
|
||||
addComponentSetter: function(constructor, baseAttr, component, index) {
|
||||
addComponentSetter: function(constructor, baseAttr, component) {
|
||||
var method = SET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
|
||||
|
||||
constructor.prototype[method] = function(val) {
|
||||
this._setComponentAttr(baseAttr, index, val);
|
||||
this._setComponentAttr(baseAttr, component, val);
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
184
src/Node.js
184
src/Node.js
@ -492,25 +492,17 @@
|
||||
* set node position relative to parent
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Nubmer} pos.y
|
||||
* @example
|
||||
* // set x and y<br>
|
||||
* node.setPosition(5, 10);<br><br>
|
||||
*
|
||||
* // set x only<br>
|
||||
* // set x and <br>
|
||||
* node.setPosition({<br>
|
||||
* x: 5<br>
|
||||
* });<br><br>
|
||||
*
|
||||
* // set x and y using an array<br>
|
||||
* node.setPosition([5, 10]);<br><br>
|
||||
*
|
||||
* // set both x and y to 5<br>
|
||||
* node.setPosition(5);
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
setPosition: function() {
|
||||
var pos = Kinetic.Util._getXY([].slice.call(arguments));
|
||||
setPosition: function(pos) {
|
||||
this.setX(pos.x);
|
||||
this.setY(pos.y);
|
||||
return this;
|
||||
@ -547,12 +539,12 @@
|
||||
* set absolute position
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Number} pos.y
|
||||
*/
|
||||
setAbsolutePosition: function() {
|
||||
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
|
||||
trans = this._clearTransform(),
|
||||
setAbsolutePosition: function(pos) {
|
||||
var trans = this._clearTransform(),
|
||||
it;
|
||||
|
||||
// don't clear translation
|
||||
@ -617,28 +609,28 @@
|
||||
* move node by an amount relative to its current position
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Object} change
|
||||
* @param {Number} change.x
|
||||
* @param {Number} change.y
|
||||
* @example
|
||||
* // move node in x direction by 1px and y direction by 2px<br>
|
||||
* node.move(1, 2);<br><br>
|
||||
*
|
||||
* // move node in x direction by 1px<br>
|
||||
* node.move({<br>
|
||||
* x: 1<br>
|
||||
* x: 1,<br>
|
||||
* y: 2)<br>
|
||||
* });
|
||||
*/
|
||||
move: function() {
|
||||
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
|
||||
move: function(change) {
|
||||
var changeX = change.x,
|
||||
changeY = change.y,
|
||||
x = this.getX(),
|
||||
y = this.getY();
|
||||
|
||||
if(pos.x !== undefined) {
|
||||
x += pos.x;
|
||||
if(changeX !== undefined) {
|
||||
x += changeX;
|
||||
}
|
||||
|
||||
if(pos.y !== undefined) {
|
||||
y += pos.y;
|
||||
if(changeY !== undefined) {
|
||||
y += changeY;
|
||||
}
|
||||
|
||||
this.setPosition(x, y);
|
||||
@ -1060,12 +1052,11 @@
|
||||
* set size
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Object} size
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
*/
|
||||
setSize: function() {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.Util._getSize(Array.prototype.slice.call(arguments));
|
||||
setSize: function(size) {
|
||||
this.setWidth(size.width);
|
||||
this.setHeight(size.height);
|
||||
return this;
|
||||
@ -1185,6 +1176,20 @@
|
||||
this._fireChangeEvent(key, oldVal, val);
|
||||
}
|
||||
},
|
||||
_setComponentAttr: function(key, component, val) {
|
||||
var oldVal;
|
||||
if(val !== undefined) {
|
||||
oldVal = this.attrs[key];
|
||||
|
||||
if (!oldVal) {
|
||||
this.attrs[key] = [];
|
||||
}
|
||||
|
||||
this._fireBeforeChangeEvent(key, oldVal, val);
|
||||
this.attrs[key][component] = val;
|
||||
this._fireChangeEvent(key, oldVal, val);
|
||||
}
|
||||
},
|
||||
_fireAndBubble: function(eventType, evt, compareShape) {
|
||||
var okayToRun = true;
|
||||
|
||||
@ -1392,44 +1397,22 @@
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scale', {x: 1, y: 1});
|
||||
|
||||
/**
|
||||
* set scale
|
||||
* @name setScale
|
||||
* @param {Number} scale
|
||||
* @param {Object} scale
|
||||
* @param {Number} scale.x
|
||||
* @param {Number} scale.y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @example
|
||||
* // set x and y to the same value<br>
|
||||
* shape.setScale(5);<br><br>
|
||||
*
|
||||
* // set x and y<br>
|
||||
* shape.setScale(20, 40);<br><br>
|
||||
*
|
||||
* // set x only <br>
|
||||
* // set x and y <br>
|
||||
* shape.setScale({<br>
|
||||
* x: 20<br>
|
||||
* });<br><br>
|
||||
*
|
||||
* // set x and y using an array<br>
|
||||
* shape.setScale([20, 40]);
|
||||
*/
|
||||
|
||||
/**
|
||||
* set scale x
|
||||
* @name setScaleX
|
||||
* @param {Number} x
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set scale y
|
||||
* @name setScaleY
|
||||
* @param {Number} y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* y: 10<br>
|
||||
* });
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -1439,14 +1422,32 @@
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'scale', 'x', 1);
|
||||
/**
|
||||
* set scale x
|
||||
* @name setScaleX
|
||||
* @param {Number} x
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale x
|
||||
* @name getScaleX
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'scale', 'y', 1);
|
||||
/**
|
||||
* set scale y
|
||||
* @name setScaleY
|
||||
* @param {Number} y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale y
|
||||
* @name getScaleY
|
||||
* @method
|
||||
@ -1515,7 +1516,7 @@
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'offset', 0);
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offset', {x: 0, y: 0});
|
||||
|
||||
/**
|
||||
* set offset. A node's offset defines the position and rotation point
|
||||
@ -1525,22 +1526,23 @@
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @example
|
||||
* // set x and y<br>
|
||||
* shape.setOffset(20, 40);<br><br>
|
||||
*
|
||||
* // set x only <br>
|
||||
* // set x and y <br>
|
||||
* shape.setOffset({<br>
|
||||
* x: 20<br>
|
||||
* y: 10<br>
|
||||
* });<br><br>
|
||||
*
|
||||
* // set x and y using an array<br>
|
||||
* shape.setOffset([20, 40]);<br><br>
|
||||
*
|
||||
* // set x and y to the same value<br>
|
||||
* shape.setOffset(5);
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* get offset
|
||||
* @name getOffset
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'offset', 'x', 0);
|
||||
/**
|
||||
* set offset x
|
||||
* @name setOffsetX
|
||||
* @method
|
||||
@ -1548,7 +1550,16 @@
|
||||
* @param {Number} x
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* get offset x
|
||||
* @name getOffsetX
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'offset', 'y', 0);
|
||||
/**
|
||||
* set offset y
|
||||
* @name setOffsetY
|
||||
* @method
|
||||
@ -1557,24 +1568,11 @@
|
||||
*/
|
||||
|
||||
/**
|
||||
* get offset
|
||||
* @name getOffset
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get offset x
|
||||
* @name getOffsetX
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get offset y
|
||||
* @name getOffsetY
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addSetter(Kinetic.Node, 'width');
|
||||
|
||||
50
src/Shape.js
50
src/Shape.js
@ -1300,30 +1300,33 @@
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffset', {x: 0, y: 0});
|
||||
|
||||
/**
|
||||
* set shadow offset
|
||||
* @name setShadowOffset
|
||||
* @method
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
* @param {Number|Array|Object} offset
|
||||
* @param {Object} offset
|
||||
* @param {Number} offset.x
|
||||
* @param {Number} offset.y
|
||||
* @example
|
||||
* // set x and y<br>
|
||||
* shape.setShadowOffset(20, 40);<br><br>
|
||||
*
|
||||
* // set x only <br>
|
||||
* shape.setShadowOffset({<br>
|
||||
* x: 20<br>
|
||||
* });<br><br>
|
||||
*
|
||||
* // set x and y using an array<br>
|
||||
* shape.setShadowOffset([20, 40]);<br><br>
|
||||
*
|
||||
* // set x and y to the same value<br>
|
||||
* shape.setShadowOffset(5);
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow offset
|
||||
* @name getShadowOffset
|
||||
* @method
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Shape, 'shadowOffset', 'x', 0);
|
||||
|
||||
/**
|
||||
* set shadow offset x
|
||||
* @name setShadowOffsetX
|
||||
@ -1332,6 +1335,15 @@
|
||||
* @param {Number} x
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow offset x
|
||||
* @name getShadowOffsetX
|
||||
* @method
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addComponentGetterSetter(Kinetic.Shape, 'shadowOffset', 'y', 0);
|
||||
|
||||
/**
|
||||
* set shadow offset y
|
||||
* @name setShadowOffsetY
|
||||
@ -1340,20 +1352,6 @@
|
||||
* @param {Number} y
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow offset
|
||||
* @name getShadowOffset
|
||||
* @method
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow offset x
|
||||
* @name getShadowOffsetX
|
||||
* @method
|
||||
* @memberof Kinetic.Shape.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow offset y
|
||||
* @name getShadowOffsetY
|
||||
|
||||
188
src/Util.js
188
src/Util.js
@ -360,191 +360,6 @@
|
||||
|
||||
return retArr;
|
||||
},
|
||||
/*
|
||||
* The argument can be:
|
||||
* - an integer (will be applied to both x and y)
|
||||
* - an array of one integer (will be applied to both x and y)
|
||||
* - an array of two integers (contains x and y)
|
||||
* - an array of four integers (contains x, y, width, and height)
|
||||
* - an object with x and y properties
|
||||
* - an array of one element which is an array of integers
|
||||
* - an array of one element of an object
|
||||
*/
|
||||
_getXY: function(arg) {
|
||||
if(this._isNumber(arg)) {
|
||||
return {
|
||||
x: arg,
|
||||
y: arg
|
||||
};
|
||||
}
|
||||
else if(this._isArray(arg)) {
|
||||
// if arg is an array of one element
|
||||
if(arg.length === 1) {
|
||||
var val = arg[0];
|
||||
// if arg is an array of one element which is a number
|
||||
if(this._isNumber(val)) {
|
||||
return {
|
||||
x: val,
|
||||
y: val
|
||||
};
|
||||
}
|
||||
// if arg is an array of one element which is an array
|
||||
else if(this._isArray(val)) {
|
||||
return {
|
||||
x: val[0],
|
||||
y: val[1]
|
||||
};
|
||||
}
|
||||
// if arg is an array of one element which is an object
|
||||
else if(this._isObject(val)) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
// if arg is an array of two or more elements
|
||||
else if(arg.length >= 2) {
|
||||
return {
|
||||
x: arg[0],
|
||||
y: arg[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
// if arg is an object return the object
|
||||
else if(this._isObject(arg)) {
|
||||
return arg;
|
||||
}
|
||||
|
||||
// default
|
||||
return null;
|
||||
},
|
||||
/*
|
||||
* The argument can be:
|
||||
* - an integer (will be applied to both width and height)
|
||||
* - an array of one integer (will be applied to both width and height)
|
||||
* - an array of two integers (contains width and height)
|
||||
* - an array of four integers (contains x, y, width, and height)
|
||||
* - an object with width and height properties
|
||||
* - an array of one element which is an array of integers
|
||||
* - an array of one element of an object
|
||||
*/
|
||||
_getSize: function(arg) {
|
||||
if(this._isNumber(arg)) {
|
||||
return {
|
||||
width: arg,
|
||||
height: arg
|
||||
};
|
||||
}
|
||||
else if(this._isArray(arg)) {
|
||||
// if arg is an array of one element
|
||||
if(arg.length === 1) {
|
||||
var val = arg[0];
|
||||
// if arg is an array of one element which is a number
|
||||
if(this._isNumber(val)) {
|
||||
return {
|
||||
width: val,
|
||||
height: val
|
||||
};
|
||||
}
|
||||
// if arg is an array of one element which is an array
|
||||
else if(this._isArray(val)) {
|
||||
/*
|
||||
* if arg is an array of one element which is an
|
||||
* array of four elements
|
||||
*/
|
||||
if(val.length >= 4) {
|
||||
return {
|
||||
width: val[2],
|
||||
height: val[3]
|
||||
};
|
||||
}
|
||||
/*
|
||||
* if arg is an array of one element which is an
|
||||
* array of two elements
|
||||
*/
|
||||
else if(val.length >= 2) {
|
||||
return {
|
||||
width: val[0],
|
||||
height: val[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
// if arg is an array of one element which is an object
|
||||
else if(this._isObject(val)) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
// if arg is an array of four elements
|
||||
else if(arg.length >= 4) {
|
||||
return {
|
||||
width: arg[2],
|
||||
height: arg[3]
|
||||
};
|
||||
}
|
||||
// if arg is an array of two elements
|
||||
else if(arg.length >= 2) {
|
||||
return {
|
||||
width: arg[0],
|
||||
height: arg[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
// if arg is an object return the object
|
||||
else if(this._isObject(arg)) {
|
||||
return arg;
|
||||
}
|
||||
|
||||
// default
|
||||
return null;
|
||||
},
|
||||
/*
|
||||
* arg will be an array of numbers or
|
||||
* an array of point arrays or
|
||||
* an array of point objects
|
||||
*/
|
||||
_getPoints: function(arg) {
|
||||
var arr = [],
|
||||
n, len;
|
||||
|
||||
if(arg === undefined) {
|
||||
return [];
|
||||
}
|
||||
|
||||
len = arg.length;
|
||||
|
||||
// an array of arrays
|
||||
if(this._isArray(arg[0])) {
|
||||
/*
|
||||
* convert array of arrays into an array
|
||||
* of objects containing x, y
|
||||
*/
|
||||
for(n = 0; n < len; n++) {
|
||||
arr.push({
|
||||
x: arg[n][0],
|
||||
y: arg[n][1]
|
||||
});
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
// an array of objects
|
||||
if(this._isObject(arg[0])) {
|
||||
return arg;
|
||||
}
|
||||
// an array of integers
|
||||
else {
|
||||
/*
|
||||
* convert array of numbers into an array
|
||||
* of objects containing x, y
|
||||
*/
|
||||
for(n = 0; n < len; n += 2) {
|
||||
arr.push({
|
||||
x: arg[n],
|
||||
y: arg[n + 1]
|
||||
});
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
},
|
||||
/*
|
||||
* arg can be an image object or image data
|
||||
*/
|
||||
@ -677,8 +492,7 @@
|
||||
}
|
||||
return retObj;
|
||||
},
|
||||
// deep object clone
|
||||
_clone: function(obj) {
|
||||
cloneObject: function(obj) {
|
||||
var retObj = {};
|
||||
for(var key in obj) {
|
||||
if(this._isObject(obj[key])) {
|
||||
|
||||
@ -15,6 +15,8 @@ suite('Rect', function(){
|
||||
stroke: 'blue'
|
||||
});
|
||||
|
||||
console.log(rect)
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
@ -45,7 +47,7 @@ suite('Rect', function(){
|
||||
stroke: 'blue',
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 5,
|
||||
shadowOffset: {x: 5, y: 5},
|
||||
shadowOpacity: 0.5,
|
||||
opacity: 0.4,
|
||||
cornerRadius: 5
|
||||
@ -82,10 +84,8 @@ suite('Rect', function(){
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
offset: {
|
||||
x: 50
|
||||
},
|
||||
scale: [2, 2],
|
||||
offset: {x: 50, y: 0},
|
||||
scale: {x: 2, y: 2},
|
||||
cornerRadius: 15,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user