lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 10:47:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ericdrowell/KineticJS

Browse Source
This commit is contained in:
ippo615
2013-12-04 19:10:08 -05:00
parent a680d33c40 76285f59b0
commit 52f96c540b
32 changed files with 818 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package.json
View File

@@ -2,19 +2,19 @@
"name": "KineticJS",
"version": "4.7.4",
"devDependencies": {
"grunt-contrib-jshint": "~0.5.4",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-concat": "~0.3.0",
"grunt-replace": "~0.4.4",
"grunt-contrib-clean": "~0.4.1",
"mocha": "~1.12.0",
"chai": "~1.7.2",
"phantomjs": "~1.9.1-8",
"mocha-phantomjs": "~3.1.2",
"grunt-cli": "~0.1.9",
"grunt": "~0.4.1",
"connect": "~2.9.0"
"grunt-contrib-jshint": "0.5.4",
"grunt-contrib-nodeunit": "0.1.2",
"grunt-contrib-uglify": "0.2.2",
"grunt-contrib-concat": "0.3.0",
"grunt-replace": "0.4.4",
"grunt-contrib-clean": "0.4.1",
"mocha": "1.12.0",
"chai": "1.7.2",
"phantomjs": "1.9.1-8",
"mocha-phantomjs": "3.1.2",
"grunt-cli": "0.1.9",
"grunt": "0.4.1",
"connect": "2.9.0"
},
"readmeFilename": "README.md",
"main": "Gruntfile.js",

95
src/Container.js
View File

@@ -218,19 +218,18 @@
* @method
* @memberof Kinetic.Container.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Array} array of shapes
*/
getAllIntersections: function() {
var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments));
getAllIntersections: function(pos) {
var arr = [];
var shapes = this.find('Shape');
var len = shapes.length;
for(var n = 0; n < len; n++) {
var shape = shapes[n];
this.find('Shape').each(function(shape) {
if(shape.isVisible() && shape.intersects(pos)) {
arr.push(shape);
}
}
});
return arr;
},
@@ -304,12 +303,9 @@
* @method
* @name setClip
* @memberof Kinetic.Container.prototype
* @param {Object|Array}
* @param {Object} clip {x:x, y:y, width:width, height:height}
* @example
* // set clip x, y, width and height with an array<br>
* image.setClip([20, 20, 100, 100]);<br><br>
*
* // set clip x, y, width and height with an object<br>
* // set clip x, y, width and height<br>
* image.setClip({<br>
* x: 20,<br>
* y: 20,<br>
@@ -318,44 +314,21 @@
* });
*/
/**
* set clipX
* @method
* @name setClipX
* @memberof Kinetic.Container.prototype
* @param {Number} x
*/
/**
* set clipY
* @name setClipY
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} y
*/
/**
* set clipWidth
* @name setClipWidth
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} width
*/
/**
* set clipHeight
* @name setClipHeight
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} height
*/
/**
* get clip
* @name getClip
* @method
* @memberof Kinetic.Container.prototype
* @return {Object}
* @returns {Object}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipX', 0);
/**
* set clip x
* @method
* @name setClipX
* @memberof Kinetic.Container.prototype
* @param {Number} x
*/
/**
@@ -363,6 +336,16 @@
* @name getClipX
* @method
* @memberof Kinetic.Container.prototype
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipY', 0);
/**
* set clip y
* @name setClipY
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} y
*/
/**
@@ -370,6 +353,16 @@
* @name getClipY
* @method
* @memberof Kinetic.Container.prototype
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipWidth', 0);
/**
* set clip width
* @name setClipWidth
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} width
*/
/**
@@ -377,6 +370,16 @@
* @name getClipWidth
* @method
* @memberof Kinetic.Container.prototype
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipHeight', 0);
/**
* set clip height
* @name setClipHeight
* @method
* @memberof Kinetic.Container.prototype
* @param {Number} height
*/
/**
@@ -384,6 +387,6 @@
* @name getClipHeight
* @method
* @memberof Kinetic.Container.prototype
* @returns {Number}
*/
})();

30
src/Context.js
View File

@@ -188,16 +188,18 @@
* clear canvas
* @method
* @memberof Kinetic.Context.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
*/
clear: function() {
var args = [].slice.call(arguments),
canvas = this.getCanvas(),
clear: function(bounds) {
var canvas = this.getCanvas(),
pos, size;
if (args.length) {
pos = Kinetic.Util._getXY(args);
size = Kinetic.Util._getSize(args);
this.clearRect(pos.x || 0, pos.y || 0, size.width, size.height);
if (bounds) {
this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
}
else {
this.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
@@ -226,8 +228,8 @@
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
_clip: function(container) {
var clipX = container.getClipX() || 0,
clipY = container.getClipY() || 0,
var clipX = container.getClipX(),
clipY = container.getClipY(),
clipWidth = container.getClipWidth(),
clipHeight = container.getClipHeight();
@@ -476,11 +478,11 @@
},
_fillRadialGradient: function(shape) {
var start = shape.getFillRadialGradientStartPoint(),
end = shape.getFillRadialGradientEndPoint(),
startRadius = shape.getFillRadialGradientStartRadius(),
endRadius = shape.getFillRadialGradientEndRadius(),
colorStops = shape.getFillRadialGradientColorStops(),
grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
end = shape.getFillRadialGradientEndPoint(),
startRadius = shape.getFillRadialGradientStartRadius(),
endRadius = shape.getFillRadialGradientEndRadius(),
colorStops = shape.getFillRadialGradientColorStops(),
grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {

38
src/Factory.js
View File

@@ -1,4 +1,4 @@
(function() {
(function() {
// CONSTANTS
var ABSOLUTE_OPACITY = 'absoluteOpacity',
ABSOLUTE_TRANSFORM = 'absoluteTransform',
@@ -204,8 +204,7 @@
addPointsSetter: function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
this._setAttr('points', val);
};
},
addSetter: function(constructor, attr) {
@@ -219,9 +218,8 @@
var that = this,
baseMethod = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function() {
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
oldVal = this.attrs[attr],
constructor.prototype[baseMethod] = function(pos) {
var oldVal = this.attrs[attr],
x = 0,
y = 0;
@@ -229,7 +227,6 @@
x = pos.x;
y = pos.y;
this._fireBeforeChangeEvent(attr, oldVal, pos);
if (x !== undefined) {
this[baseMethod + UPPER_X](x);
}
@@ -244,21 +241,16 @@
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],
constructor.prototype[baseMethod] = function(box) {
var oldVal = this.attrs[attr],
x, y, width, height;
if (both) {
x = both.x;
y = both.y;
width = both.width;
height = both.height;
if (box) {
x = box.x;
y = box.y;
width = box.width;
height = box.height;
this._fireBeforeChangeEvent(attr, oldVal, both);
if (x !== undefined) {
this[baseMethod + UPPER_X](x);
}
@@ -271,7 +263,7 @@
if (height !== undefined) {
this[baseMethod + UPPER_HEIGHT](height);
}
this._fireChangeEvent(attr, oldVal, both);
this._fireChangeEvent(attr, oldVal, box);
}
};
},
@@ -294,12 +286,10 @@
var that = this,
baseMethod = ADD + Kinetic.Util._removeLastLetter(Kinetic.Util._capitalize(attr));
constructor.prototype[baseMethod] = function() {
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
oldVal = this.attrs[attr];
constructor.prototype[baseMethod] = function(pos) {
var oldVal = this.attrs[attr];
if (pos) {
this._fireBeforeChangeEvent(attr, oldVal, pos);
this.attrs[attr].push(pos);
this._fireChangeEvent(attr, oldVal, pos);
}

26
src/Layer.js
View File

@@ -44,11 +44,13 @@
* method for determining if a point intersects a shape or not
* @method
* @memberof Kinetic.Layer.prototype
* @param {Kinetic.Shape|null} shape
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Kinetic.Shape}
*/
getIntersection: function() {
var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments)),
obj, i, intersectionOffset, shape;
getIntersection: function(pos) {
var obj, i, intersectionOffset, shape;
if(this.isVisible()) {
for (i=0; i<INTERSECTION_OFFSETS_LEN; i++) {
@@ -151,17 +153,21 @@
* clear scene and hit canvas contexts tied to the layer
* @method
* @memberof Kinetic.Node.prototype
* @param {Array|Object} [bounds]
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
* @example
* layer.clear();<br>
* layer.clear(0, 0, 100, 100);
*/
clear: function() {
clear: function(bounds) {
var context = this.getContext(),
hitContext = this.getHitCanvas().getContext();
context.clear.apply(context, arguments);
hitContext.clear.apply(hitContext, arguments);
context.clear(bounds);
hitContext.clear(bounds);
return this;
},
// extend Node.prototype.setVisible
@@ -262,7 +268,9 @@
Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container);
// add getters and setters
Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true);
Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', function() {
return true;
});
/**
* set flag which determines if the layer is cleared or not

292
src/Node.js
View File

@@ -302,31 +302,6 @@
return ancestors;
},
/**
* set attr
* @method
* @memberof Kinetic.Node.prototype
* @param {String} attr
* #param {*} val
* @example
* node.setAttr('x', 5);
*/
setAttr: function() {
var args = Array.prototype.slice.call(arguments),
attr = args[0],
method = SET + Kinetic.Util._capitalize(attr),
func = this[method];
args.shift();
if(Kinetic.Util._isFunction(func)) {
func.apply(this, args);
}
// otherwise set directly
else {
this.attrs[attr] = args[0];
}
return this;
},
/**
* get attrs object literal
* @method
@@ -492,25 +467,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 +514,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
@@ -571,7 +538,7 @@
y: this.attrs.y + it.getTranslation().y
};
this.setPosition(pos.x, pos.y);
this.setPosition({x:pos.x, y:pos.y});
this._setTransform(trans);
return this;
},
@@ -617,31 +584,31 @@
* 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);
this.setPosition({x:x, y:y});
return this;
},
_eachAncestorReverse: function(func, includeSelf) {
@@ -1060,12 +1027,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;
@@ -1137,7 +1103,7 @@
}
},
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
this._fire([BEFORE, Kinetic.Util._capitalize(attr), CHANGE].join(EMPTY_STRING), {
oldVal: oldVal,
newVal: newVal
});
@@ -1176,15 +1142,54 @@
this._setAttr(NAME, name);
return this;
},
/**
* set attr
* @method
* @memberof Kinetic.Node.prototype
* @param {String} attr
* #param {*} val
* @example
* node.setAttr('x', 5);
*/
setAttr: function() {
var args = Array.prototype.slice.call(arguments),
attr = args[0],
val = args[1],
method = SET + Kinetic.Util._capitalize(attr),
func = this[method];
if(Kinetic.Util._isFunction(func)) {
func.call(this, val);
}
// otherwise set directly
else {
this._setAttr(attr, val);
}
return this;
},
_setAttr: function(key, val) {
var oldVal;
if(val !== undefined) {
oldVal = this.attrs[key];
this._fireBeforeChangeEvent(key, oldVal, val);
this.attrs[key] = val;
this._fireChangeEvent(key, oldVal, val);
}
},
_setComponentAttr: function(key, component, val) {
var oldVal;
if(val !== undefined) {
oldVal = this.attrs[key];
if (!oldVal) {
// set value to default value using getAttr
this.attrs[key] = this.getAttr(key);
}
//this._fireBeforeChangeEvent(key, oldVal, val);
this.attrs[key][component] = val;
this._fireChangeEvent(key, oldVal, val);
}
},
_fireAndBubble: function(eventType, evt, compareShape) {
var okayToRun = true;
@@ -1397,39 +1402,17 @@
/**
* 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,30 @@
* @memberof Kinetic.Node.prototype
*/
/**
/**
* set scale x
* @name setScaleX
* @param {Number} x
* @method
* @memberof Kinetic.Node.prototype
*/
/**
* get scale x
* @name getScaleX
* @method
* @memberof Kinetic.Node.prototype
*/
/**
/**
* set scale y
* @name setScaleY
* @param {Number} y
* @method
* @memberof Kinetic.Node.prototype
*/
/**
* get scale y
* @name getScaleY
* @method
@@ -1458,27 +1457,28 @@
/**
* set skew
* @name setSkew
* @param {Number} x
* @param {Number} y
* @param {Object} skew
* @param {Number} skew.x
* @param {Number} skew.y
* @method
* @memberof Kinetic.Node.prototype
* @example
* // set x and y<br>
* shape.setSkew(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setSkew({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setSkew([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setSkew(5);
* y: 10
* });
*/
/**
/**
* get skew
* @name getSkew
* @method
* @memberof Kinetic.Node.prototype
* @returns {Object}
*/
/**
* set skew x
* @name setSkewX
* @param {Number} x
@@ -1486,7 +1486,15 @@
* @memberof Kinetic.Node.prototype
*/
/**
/**
* get skew x
* @name getSkewX
* @method
* @memberof Kinetic.Node.prototype
* @returns {Number}
*/
/**
* set skew y
* @name setSkewY
* @param {Number} y
@@ -1495,24 +1503,11 @@
*/
/**
* get skew
* @name getSkew
* @method
* @memberof Kinetic.Node.prototype
*/
/**
* get skew x
* @name getSkewX
* @method
* @memberof Kinetic.Node.prototype
*/
/**
* get skew y
* @name getSkewY
* @method
* @memberof Kinetic.Node.prototype
* @returns {Number}
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'offset', 0);
@@ -1525,22 +1520,22 @@
* @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}
*/
/**
* set offset x
* @name setOffsetX
* @method
@@ -1548,7 +1543,15 @@
* @param {Number} x
*/
/**
/**
* get offset x
* @name getOffsetX
* @method
* @memberof Kinetic.Node.prototype
* @returns {Number}
*/
/**
* set offset y
* @name setOffsetY
* @method
@@ -1557,27 +1560,14 @@
*/
/**
* 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');
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);
/**
* set width
@@ -1587,7 +1577,7 @@
* @param {Number} width
*/
Kinetic.Factory.addSetter(Kinetic.Node, 'height');
Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0);
/**
* set height

490
src/Shape.js
View File

@@ -106,14 +106,13 @@
* because it performs much better
* @method
* @memberof Kinetic.Shape.prototype
* @param {Object} point point can be an object containing
* an x and y property, or it can be an array with two elements
* in which the first element is the x component and the second
* element is the y component
* @param {Object} point
* @param {Number} point.x
* @param {Number} point.y
* @returns {Boolean}
*/
intersects: function() {
var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments)),
stage = this.getStage(),
intersects: function(pos) {
var stage = this.getStage(),
bufferHitCanvas = stage.bufferHitCanvas,
p;
@@ -611,6 +610,62 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
/**
* set shadow offset
* @name setShadowOffset
* @method
* @memberof Kinetic.Shape.prototype
* @param {Object} offset
* @param {Number} offset.x
* @param {Number} offset.y
* @example
* // set x and y<br>
* shape.setShadowOffset({<br>
* x: 20<br>
* y: 10
* });
*/
/**
* get shadow offset
* @name getShadowOffset
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set shadow offset x
* @name setShadowOffsetX
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} x
*/
/**
* get shadow offset x
* @name getShadowOffsetX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* set shadow offset y
* @name setShadowOffsetY
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} y
*/
/**
* get shadow offset y
* @name getShadowOffsetY
* @method
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternImage');
/**
@@ -711,7 +766,7 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX');
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0);
/**
* set fill pattern x
@@ -728,7 +783,7 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternY');
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternY', 0);
/**
* set fill pattern y
@@ -763,7 +818,7 @@
* @param {Array} colorStops
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartRadius');
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartRadius', 0);
/**
* set fill radial gradient start radius
@@ -780,7 +835,7 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndRadius');
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndRadius', 0);
/**
* set fill radial gradient end radius
@@ -899,6 +954,23 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeScaleEnabled', true);
/**
* set stroke scale enabled
* @name setStrokeScaleEnabled
* @method
* @memberof Kinetic.Shape.prototype
* @param {Boolean} enabled
*/
/**
* get stroke scale enabled
* @name getStrokeScaleEnabled
* @method
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPriority', 'color');
/**
@@ -917,23 +989,6 @@
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeScaleEnabled', true);
/**
* set stroke scale enabled
* @name setStrokeScaleEnabled
* @method
* @memberof Kinetic.Shape.prototype
* @param {Boolean} enabled
*/
/**
* get stroke scale enabled
* @name getStrokeScaleEnabled
* @method
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset', 0);
/**
@@ -941,24 +996,26 @@
* @name setFillPatternOffset
* @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.setFillPatternOffset(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setFillPatternOffset({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillPatternOffset([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillPatternOffset(5);
* y: 10
* });
*/
/**
/**
* get fill pattern offset
* @name getFillPatternOffset
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set fill pattern offset x
* @name setFillPatternOffsetX
* @method
@@ -966,7 +1023,14 @@
* @param {Number} x
*/
/**
/**
* get fill pattern offset x
* @name getFillPatternOffsetX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* set fill pattern offset y
* @name setFillPatternOffsetY
* @method
@@ -974,21 +1038,7 @@
* @param {Number} y
*/
/**
* get fill pattern offset
* @name getFillPatternOffset
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill pattern offset x
* @name getFillPatternOffsetX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill pattern offset y
* @name getFillPatternOffsetY
* @method
@@ -1002,24 +1052,26 @@
* @name setFillPatternScale
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} scale
* @param {Object} scale
* @param {Number} scale.x
* @param {Number} scale.y
* @example
* // set x and y to the same value<br>
* shape.setFillPatternScale(5);<br><br>
*
* // set x and y<br>
* shape.setFillPatternScale(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setFillPatternScale({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillPatternScale([20, 40]);
* y: 10
* });
*/
/**
/**
* get fill pattern scale
* @name getFillPatternScale
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set fill pattern scale x
* @name setFillPatternScaleX
* @method
@@ -1027,7 +1079,15 @@
* @param {Number} x
*/
/**
/**
* get fill pattern scale x
* @name getFillPatternScaleX
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
/**
* set fill pattern scale y
* @name setFillPatternScaleY
* @method
@@ -1035,25 +1095,12 @@
* @param {Number} y
*/
/**
* get fill pattern scale
* @name getFillPatternScale
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill pattern scale x
* @name getFillPatternScaleX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill pattern scale y
* @name getFillPatternScaleY
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint', 0);
@@ -1063,24 +1110,26 @@
* @name setFillLinearGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} startPoint
* @param {Object} startPoint
* @param {Number} startPoint.x
* @param {Number} startPoint.y
* @example
* // set x and y<br>
* shape.setFillLinearGradientStartPoint(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setFillLinearGradientStartPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillLinearGradientStartPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillLinearGradientStartPoint(5);
* y: 10
* });
*/
/**
/**
* get fill linear gradient start point
* @name getFillLinearGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set fill linear gradient start point x
* @name setFillLinearGradientStartPointX
* @method
@@ -1088,7 +1137,15 @@
* @param {Number} x
*/
/**
/**
* get fill linear gradient start point x
* @name getFillLinearGradientStartPointX
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
/**
* set fill linear gradient start point y
* @name setFillLinearGradientStartPointY
* @method
@@ -1096,25 +1153,12 @@
* @param {Number} y
*/
/**
* get fill linear gradient start point
* @name getFillLinearGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill linear gradient start point x
* @name getFillLinearGradientStartPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill linear gradient start point y
* @name getFillLinearGradientStartPointY
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint', 0);
@@ -1124,24 +1168,24 @@
* @name setFillLinearGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} endPoint
* @param {Object} endPoint
* @example
* // set x and y<br>
* shape.setFillLinearGradientEndPoint(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillLinearGradientEndPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillLinearGradientEndPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillLinearGradientEndPoint(5);
* y: 10
* });
*/
/**
/**
* get fill linear gradient end point
* @name getFillLinearGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set fill linear gradient end point x
* @name setFillLinearGradientEndPointX
* @method
@@ -1149,7 +1193,15 @@
* @param {Number} x
*/
/**
/**
* get fill linear gradient end point x
* @name getFillLinearGradientEndPointX
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
/**
* set fill linear gradient end point y
* @name setFillLinearGradientEndPointY
* @method
@@ -1157,25 +1209,12 @@
* @param {Number} y
*/
/**
* get fill linear gradient end point
* @name getFillLinearGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill linear gradient end point x
* @name getFillLinearGradientEndPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill linear gradient end point y
* @name getFillLinearGradientEndPointY
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number}
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint', 0);
@@ -1185,24 +1224,26 @@
* @name setFillRadialGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} startPoint
* @param {Object} startPoint
* @param {Number} startPoint.x
* @param {Number} startPoint.y
* @example
* // set x and y<br>
* shape.setFillRadialGradientStartPoint(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setFillRadialGradientStartPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillRadialGradientStartPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillRadialGradientStartPoint(5);
* y: 10
* });
*/
/**
/**
* get fill radial gradient start point
* @name getFillRadialGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* set fill radial gradient start point x
* @name setFillRadialGradientStartPointX
* @method
@@ -1210,7 +1251,14 @@
* @param {Number} x
*/
/**
/**
* get fill radial gradient start point x
* @name getFillRadialGradientStartPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* set fill radial gradient start point y
* @name setFillRadialGradientStartPointY
* @method
@@ -1218,21 +1266,7 @@
* @param {Number} y
*/
/**
* get fill radial gradient start point
* @name getFillRadialGradientStartPoint
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill radial gradient start point x
* @name getFillRadialGradientStartPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill radial gradient start point y
* @name getFillRadialGradientStartPointY
* @method
@@ -1246,21 +1280,23 @@
* @name setFillRadialGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} endPoint
* @param {Object} endPoint
* @param {Number} endPoint.x
* @param {Number} endPoint.y
* @example
* // set x and y<br>
* shape.setFillRadialGradientEndPoint(20, 40);<br><br>
*
* // set x only <br>
* // set x and y <br>
* shape.setFillRadialGradientEndPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillRadialGradientEndPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillRadialGradientEndPoint(5);
* y: 10
* });
*/
/**
* get fill radial gradient end point
* @name getFillRadialGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
@@ -1271,7 +1307,14 @@
* @param {Number} x
*/
/**
/**
* get fill radial gradient end point x
* @name getFillRadialGradientEndPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* set fill radial gradient end point y
* @name setFillRadialGradientEndPointY
* @method
@@ -1279,88 +1322,13 @@
* @param {Number} y
*/
/**
* get fill radial gradient end point
* @name getFillRadialGradientEndPoint
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
* get fill radial gradient end point x
* @name getFillRadialGradientEndPointX
* @method
* @memberof Kinetic.Shape.prototype
*/
/**
/**
* get fill radial gradient end point y
* @name getFillRadialGradientEndPointY
* @method
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
/**
* set shadow offset
* @name setShadowOffset
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} offset
* @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);
*/
/**
* set shadow offset x
* @name setShadowOffsetX
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} x
*/
/**
* set shadow offset y
* @name setShadowOffsetY
* @method
* @memberof Kinetic.Shape.prototype
* @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
* @method
* @memberof Kinetic.Shape.prototype
*/
Kinetic.Factory.addRotationGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0);
/**

10
src/Stage.js
View File

@@ -254,11 +254,13 @@
* method for determining if a point intersects a shape or not
* @method
* @memberof Kinetic.Stage.prototype
* @param {Kinetic.Shape} shape
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Kinetic.Shape}
*/
getIntersection: function() {
var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments)),
layers = this.getChildren(),
getIntersection: function(pos) {
var layers = this.getChildren(),
len = layers.length,
end = len - 1,
n, shape;

237
src/Util.js
View File

@@ -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])) {
@@ -690,6 +504,9 @@
}
return retObj;
},
cloneArray: function(arr) {
return arr.slice(0);
},
_degToRad: function(deg) {
return deg * PI_OVER_DEG180;
},
@@ -732,39 +549,31 @@
constructor.prototype[key] = methods[key];
}
},
_getControlPoints: function(p0, p1, p2, t) {
var x0 = p0.x;
var y0 = p0.y;
var x1 = p1.x;
var y1 = p1.y;
var x2 = p2.x;
var y2 = p2.y;
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
var fa = t * d01 / (d01 + d12);
var fb = t * d12 / (d01 + d12);
var p1x = x1 - fa * (x2 - x0);
var p1y = y1 - fa * (y2 - y0);
var p2x = x1 + fb * (x2 - x0);
var p2y = y1 + fb * (y2 - y0);
return [{
x: p1x,
y: p1y
}, {
x: p2x,
y: p2y
}];
_getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
fa = t * d01 / (d01 + d12),
fb = t * d12 / (d01 + d12),
p1x = x1 - fa * (x2 - x0),
p1y = y1 - fa * (y2 - y0),
p2x = x1 + fb * (x2 - x0),
p2y = y1 + fb * (y2 - y0);
return [p1x ,p1y, p2x, p2y];
},
_expandPoints: function(points, tension) {
var length = points.length,
_expandPoints: function(p, tension) {
var len = p.length,
allPoints = [],
n, cp;
for(n = 1; n < length - 1; n++) {
cp = Kinetic.Util._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
for (n=2; n<len-2; n+=2) {
cp = Kinetic.Util._getControlPoints(p[n-2], p[n-1], p[n], p[n+1], p[n+2], p[n+3], tension);
allPoints.push(cp[0]);
allPoints.push(points[n]);
allPoints.push(cp[1]);
allPoints.push(p[n]);
allPoints.push(p[n+1]);
allPoints.push(cp[2]);
allPoints.push(cp[3]);
}
return allPoints;

2
src/plugins/TextPath.js
View File

@@ -315,7 +315,7 @@
Kinetic.Util.extend(Kinetic.TextPath, Kinetic.Shape);
// add setters and getters
Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontFamily', CALIBRI);
Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontFamily', 'Arial');
/**
* set font family

42
src/shapes/Ellipse.js
View File

@@ -68,13 +68,9 @@
* @name setRadius
* @method
* @memberof Kinetic.Ellipse.prototype
* @param {Object|Array} radius
* radius can be a number, in which the ellipse becomes a circle,
* it can be an object with an x and y component, or it
* can be an array in which the first element is the x component
* and the second element is the y component. The x component
* defines the horizontal radius and the y component
* defines the vertical radius
* @param {Object} radius
* @param {Number} radius.x
* @param {Number} radius.y
*/
/**
@@ -84,4 +80,36 @@
* @memberof Kinetic.Ellipse.prototype
* @returns {Object}
*/
/**
* set radius x
* @name setRadiusX
* @method
* @memberof Kinetic.Ellipse.prototype
* @param {Number} x
*/
/**
* get radius x
* @name getRadiusX
* @method
* @memberof Kinetic.Ellipse.prototype
* @returns {Number}
*/
/**
* set radius y
* @name setRadiusY
* @method
* @memberof Kinetic.Ellipse.prototype
* @param {Number} y
*/
/**
* get radius y
* @name getRadiusY
* @method
* @memberof Kinetic.Ellipse.prototype
* @returns {Number}
*/
})();

97
src/shapes/Image.js
View File

@@ -43,7 +43,7 @@
drawFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
crop,
crop, cropWidth, cropHeight,
params,
image;
@@ -65,13 +65,11 @@
image = this.getImage();
if (image) {
crop = this.getCrop();
if (crop) {
crop.x = crop.x || 0;
crop.y = crop.y || 0;
crop.width = crop.width || image.width - crop.x;
crop.height = crop.height || image.height - crop.y;
params = [image, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height];
crop = this.getCrop(),
cropWidth = crop.width;
cropHeight = crop.height;
if (cropWidth && cropHeight) {
params = [image, crop.x, crop.y, cropWidth, cropHeight, 0, 0, width, height];
} else {
params = [image, 0, 0, width, height];
}
@@ -111,12 +109,12 @@
width = this.getWidth(),
height = this.getHeight(),
filter = this.getFilter(),
crop = this.getCrop() || {},
crop = this.getCrop(),
filterCanvas, context, imageData;
// Determine the region we are cropping
crop.x = crop.x || 0;
crop.y = crop.y || 0;
crop.x = crop.x;
crop.y = crop.y;
crop.width = crop.width || width - crop.x;
crop.height = crop.height || height - crop.y;
@@ -271,18 +269,19 @@
* @returns {ImageObject}
*/
Kinetic.Factory.addBoxGetterSetter(Kinetic.Image, 'crop');
Kinetic.Factory.addBoxGetterSetter(Kinetic.Image, 'crop', 0);
/**
* set crop
* @method
* @name setCrop
* @memberof Kinetic.Image.prototype
* @param {Object|Array}
* @param {Object} crop
* @param {Number} crop.x
* @param {Number} crop.y
* @param {Number} crop.width
* @param {Number} crop.height
* @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>
* // set crop x, y, width and height<br>
* image.setCrop({<br>
* x: 20,<br>
* y: 20,<br>
@@ -291,38 +290,6 @@
* });
*/
/**
* 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
@@ -331,6 +298,14 @@
* @returns {Object}
*/
/**
* set crop x
* @method
* @name setCropX
* @memberof Kinetic.Image.prototype
* @param {Number} x
*/
/**
* get crop x
* @name getCropX
@@ -339,6 +314,14 @@
* @returns {Number}
*/
/**
* set crop y
* @name setCropY
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} y
*/
/**
* get crop y
* @name getCropY
@@ -347,6 +330,14 @@
* @returns {Number}
*/
/**
* set cropWidth
* @name setCropWidth
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} width
*/
/**
* get crop width
* @name getCropWidth
@@ -355,6 +346,14 @@
* @returns {Number}
*/
/**
* set cropHeight
* @name setCropHeight
* @method
* @memberof Kinetic.Image.prototype
* @param {Number} height
*/
/**
* get crop height
* @name getCropHeight

76
src/shapes/Line.js
View File

@@ -43,31 +43,30 @@
tp, len, n, point;
context.beginPath();
context.moveTo(points[0].x, points[0].y);
context.moveTo(points[0], points[1]);
// tension
if(tension !== 0 && length > 2) {
if(tension !== 0 && length > 4) {
tp = this.getTensionPoints();
len = tp.length;
n = closed ? 0 : 2;
n = closed ? 0 : 4;
if (!closed) {
context.quadraticCurveTo(tp[0].x, tp[0].y, tp[1].x, tp[1].y);
context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
}
while(n < len - 1) {
context.bezierCurveTo(tp[n].x, tp[n++].y, tp[n].x, tp[n++].y, tp[n].x, tp[n++].y);
while(n < len - 2) {
context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
}
if (!closed) {
context.quadraticCurveTo(tp[len - 1].x, tp[len - 1].y, points[length - 1].x, points[length - 1].y);
context.quadraticCurveTo(tp[len-2], tp[len-1], points[length-2], points[length-1]);
}
}
// no tension
else {
for(n = 1; n < length; n++) {
point = points[n];
context.lineTo(point.x, point.y);
for(n = 2; n < length; n+=2) {
context.lineTo(points[n], points[n+1]);
}
}
@@ -93,25 +92,48 @@
}
},
_getTensionPointsClosed: function() {
var points = this.getPoints(),
length = points.length,
var p = this.getPoints(),
len = p.length,
tension = this.getTension(),
util = Kinetic.Util,
firstControlPoints = util._getControlPoints(points[length - 1], points[0], points[1], tension),
lastControlPoints = util._getControlPoints(points[length - 2], points[length - 1], points[0], tension),
tensionPoints = Kinetic.Util._expandPoints(points, tension);
firstControlPoints = util._getControlPoints(
p[len-2],
p[len-1],
p[0],
p[1],
p[2],
p[3],
tension
),
lastControlPoints = util._getControlPoints(
p[len-4],
p[len-3],
p[len-2],
p[len-1],
p[0],
p[1],
tension
),
middle = Kinetic.Util._expandPoints(p, tension),
tp = [
firstControlPoints[2],
firstControlPoints[3]
]
.concat(middle)
.concat([
lastControlPoints[0],
lastControlPoints[1],
p[len-2],
p[len-1],
lastControlPoints[2],
lastControlPoints[3],
firstControlPoints[0],
firstControlPoints[1],
p[0],
p[1]
]);
// prepend control point
tensionPoints.unshift(firstControlPoints[1]);
// append cp, point, cp, cp, first point
tensionPoints.push(lastControlPoints[0]);
tensionPoints.push(points[length - 1]);
tensionPoints.push(lastControlPoints[1]);
tensionPoints.push(firstControlPoints[0]);
tensionPoints.push(points[0]);
return tensionPoints;
return tp;
}
};
Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);
@@ -153,7 +175,7 @@
* @param {Number} tension
*/
Kinetic.Factory.addPointsGetterSetter(Kinetic.Line, 'points');
Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points');
/**
* get points array
* @name getPoints

4
src/shapes/Wedge.js
View File

@@ -42,7 +42,9 @@
Kinetic.Util.extend(Kinetic.Wedge, Kinetic.Shape);
// add getters setters
Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', function() {
return 0;
});
/**
* set radius

2
test/performance/common/random-squares.js
View File

@@ -66,7 +66,7 @@
for (var i = 0; i < circles.length; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
circles[i].setPosition(x, y);
circles[i].setPosition({x: x, y: y});
}
lastTime = time;

23
test/performance/random-squares-dev.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../dist/kinetic-dev.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="lib/stats.js"></script>
<script src="common/random-squares.js"></script>
</body>
</html>

3
test/performance/random-squares-v4.7.4.html
View File

@@ -14,8 +14,7 @@
<body>
<div id="container"></div>
<!--<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.js"></script>-->
<script src="../../dist/kinetic-dev.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="lib/stats.js"></script>
<script src="common/random-squares.js"></script>

2
test/unit/Container-test.js
View File

@@ -4,7 +4,7 @@ suite('Container', function() {
test('clip', function() {
var stage = addStage();
var layer = new Kinetic.Layer({
clip: [0, 0, stage.getWidth() / 2, 100]
clip: {x:0, y:0, width:stage.getWidth() / 2, height:100}
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({

10
test/unit/Layer-test.js
View File

@@ -88,7 +88,7 @@ suite('Layer', function() {
layer.add(circle);
stage.add(layer);
layer.clear(100, 100, 100, 100);
layer.clear({x:100, y:100, width: 100, height:100});
var trace = layer.getContext().getTrace();
//console.log(trace);
@@ -130,9 +130,9 @@ suite('Layer', function() {
layer.add(greenCircle);
stage.add(layer);
assert.equal(layer.getIntersection(300, 100).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(layer.getIntersection(380, 100).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(layer.getIntersection(100, 100), null, 'shape should be null');
assert.equal(layer.getIntersection({x:300, y:100}).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(layer.getIntersection({x:380, y:100}).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(layer.getIntersection({x:100, y:100}), null, 'shape should be null');
});
@@ -186,7 +186,7 @@ suite('Layer', function() {
stage.add(layer);
for(var n = 0; n < 20; n++) {
circle.move(10, 0);
circle.move({x:10, y:0});
layer.draw();
}

94
test/unit/Node-test.js
View File

@@ -68,7 +68,7 @@ suite('Node', function() {
assert.equal(circle.getFill(), 'red');
circle.setAttr('position', 5, 6);
circle.setAttr('position', {x: 5, y: 6});
assert.equal(circle.getX(), 5);
assert.equal(circle.getY(), 6);
@@ -352,9 +352,9 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'blue',
offset: [10, 10],
offset: {x:10, y:10},
shadowColor: 'black',
shadowOffset: [20, 20]
shadowOffset: {x:20, y:20}
});
layer.add(rect);
@@ -367,7 +367,7 @@ suite('Node', function() {
offsetChange = true;
});
rect.setOffset(1, 2);
rect.setOffset({x:1, y:2});
assert.equal(offsetChange, true);
});
@@ -574,7 +574,7 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'blue',
shadowOffset: [10, 10],
shadowOffset: {x: 10, y: 10},
});
var circle = new Kinetic.Circle({
@@ -608,9 +608,9 @@ suite('Node', function() {
radiusChanged++;
});
circle.setRadius(70, 20);
circle.setRadius(70);
rect.setSize(210);
rect.setSize({width: 210, height: 210});
rect.setShadowOffset({
x: 20
});
@@ -776,7 +776,7 @@ suite('Node', function() {
assert.equal(rect.getScale().y, 0.5);
assert.equal(rect.getRotation(), 20 * Math.PI / 180);
rect.setScale(2, 0.3);
rect.setScale({x:2, y:0.3});
assert.equal(rect.getScale().x, 2);
assert.equal(rect.getScale().y, 0.3);
@@ -1131,7 +1131,7 @@ suite('Node', function() {
assert.equal(rect.getOffset().x, 40);
assert.equal(rect.getOffset().y, 20);
rect.setOffset(80, 40);
rect.setOffset({x:80, y:40});
assert.equal(rect.getOffsetX(), 80);
assert.equal(rect.getOffsetY(), 40);
@@ -1203,7 +1203,7 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
rect.setShadowOffset([1, 2]);
rect.setShadowOffset({x:1, y:2});
assert.equal(rect.getShadowOffset().x, 1);
assert.equal(rect.getShadowOffset().y, 2);
// make sure we still have the other properties
@@ -1218,16 +1218,12 @@ suite('Node', function() {
assert.equal(rect.getShadowOffset().y, 4);
// test partial setting
rect.setShadowOffset({
x: 5
});
rect.setShadowOffsetX(5);
assert.equal(rect.getShadowOffset().x, 5);
assert.equal(rect.getShadowOffset().y, 4);
// test partial setting
rect.setShadowOffset({
y: 6
});
rect.setShadowOffsetY(6);
assert.equal(rect.getShadowOffset().x, 5);
assert.equal(rect.getShadowOffset().y, 6);
@@ -1248,11 +1244,11 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
rect.setOffset(1, 2);
rect.setOffset({x:1, y: 2});
assert.equal(rect.getOffset().x, 1);
assert.equal(rect.getOffset().y, 2);
rect.setOffset([3, 4]);
rect.setOffset({x:3, y:4});
assert.equal(rect.getOffset().x, 3);
assert.equal(rect.getOffset().y, 4);
@@ -1263,15 +1259,11 @@ suite('Node', function() {
assert.equal(rect.getOffset().x, 5);
assert.equal(rect.getOffset().y, 6);
rect.setOffset({
x: 7
});
rect.setOffsetX(7);
assert.equal(rect.getOffset().x, 7);
assert.equal(rect.getOffset().y, 6);
rect.setOffset({
y: 8
});
rect.setOffsetY(8);
assert.equal(rect.getOffset().x, 7);
assert.equal(rect.getOffset().y, 8);
@@ -1292,11 +1284,11 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
rect.setPosition(1, 2);
rect.setPosition({x:1, y:2});
assert.equal(rect.getPosition().x, 1);
assert.equal(rect.getPosition().y, 2);
rect.setPosition([3, 4]);
rect.setPosition({x:3, y:4});
assert.equal(rect.getPosition().x, 3);
assert.equal(rect.getPosition().y, 4);
@@ -1307,19 +1299,15 @@ suite('Node', function() {
assert.equal(rect.getPosition().x, 5);
assert.equal(rect.getPosition().y, 6);
rect.setPosition({
x: 7
});
rect.setX(7);
assert.equal(rect.getPosition().x, 7);
assert.equal(rect.getPosition().y, 6);
rect.setPosition({
y: 8
});
rect.setY(8);
assert.equal(rect.getPosition().x, 7);
assert.equal(rect.getPosition().y, 8);
rect.move(10);
rect.move({x: 10, y: 10});
assert.equal(rect.getPosition().x, 17);
assert.equal(rect.getPosition().y, 18);
@@ -1342,19 +1330,19 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
rect.setScale(2, 3);
rect.setScale({x:2, y:3});
assert.equal(rect.getScale().x, 2);
assert.equal(rect.getScale().y, 3);
rect.setScale(4);
rect.setScale({x:4,y:4});
assert.equal(rect.getScale().x, 4);
assert.equal(rect.getScale().y, 4);
rect.setScale([5, 6]);
rect.setScale({x:5, y:6});
assert.equal(rect.getScale().x, 5);
assert.equal(rect.getScale().y, 6);
rect.setScale([7, 8, 999, 999]);
rect.setScale({x: 7, y:8});
assert.equal(rect.getScale().x, 7);
assert.equal(rect.getScale().y, 8);
@@ -1365,15 +1353,11 @@ suite('Node', function() {
assert.equal(rect.getScale().x, 9);
assert.equal(rect.getScale().y, 10);
rect.setScale({
x: 11
});
rect.setScaleX(11);
assert.equal(rect.getScale().x, 11);
assert.equal(rect.getScale().y, 10);
rect.setScale({
y: 12
});
rect.setScaleY(12);
assert.equal(rect.getScale().x, 11);
assert.equal(rect.getScale().y, 12);
@@ -1401,7 +1385,7 @@ suite('Node', function() {
width: 100,
height: 50,
fill: 'red',
scale: 2
scale: {x:2,y:2}
});
var rect3 = new Kinetic.Rect({
@@ -1410,7 +1394,7 @@ suite('Node', function() {
width: 100,
height: 50,
fill: 'red',
scale: [2, 3]
scale: {x:2, y:3}
});
var rect4 = new Kinetic.Rect({
@@ -1419,9 +1403,7 @@ suite('Node', function() {
width: 100,
height: 50,
fill: 'red',
scale: {
x: 2
}
scaleX: 2
});
var rect5 = new Kinetic.Rect({
@@ -1430,9 +1412,7 @@ suite('Node', function() {
width: 100,
height: 50,
fill: 'red',
scale: {
y: 2
}
scaleY: 2
});
layer.add(rect1).add(rect2).add(rect3).add(rect4).add(rect5);
@@ -1450,7 +1430,7 @@ suite('Node', function() {
assert.equal(rect4.getScale().x, 2);
assert.equal(rect4.getScale().y, 1);
assert.equal(rect5.getScale().x, 1);
//assert.equal(rect5.getScale().x, 1);
assert.equal(rect5.getScale().y, 2);
});
@@ -1527,7 +1507,7 @@ suite('Node', function() {
//console.log(rect.getAbsoluteTransform().getTranslation())
stage.rotate(Math.PI / 3);
stage.setScale(0.5);
stage.setScale({x:0.5, y:0.5});
stage.draw();
@@ -1581,7 +1561,7 @@ suite('Node', function() {
name: 'groupName',
id: 'groupId',
rotationDeg: 45,
offset: [side / 2, side / 2],
offset: {x:side / 2, y:side / 2},
x: diagonal / 2,
y: diagonal / 2
});
@@ -1870,9 +1850,9 @@ suite('Node', function() {
layer.add(group);
stage.add(layer);
circle.setPosition(100, 0);
group.setPosition(100, 0);
layer.setPosition(100, 0);
circle.setPosition({x:100, y:0});
group.setPosition({x: 100, y: 0});
layer.setPosition({x: 100, y: 0});
// test relative positions
assert.equal(circle.getPosition().x, 100);

26
test/unit/Shape-test.js
View File

@@ -1,4 +1,4 @@
suite('Shape-test', function() {
suite('Shape', function() {
// ======================================================
test('shape color components', function() {
@@ -191,8 +191,8 @@ suite('Shape-test', function() {
fillPatternImage: imageObj,
fillPatternX: -20,
fillPatternY: -30,
fillPatternScale: 0.5,
fillPatternOffset: [219, 150],
fillPatternScale: {x: 0.5, y:0.5},
fillPatternOffset: {x: 219, y: 150},
fillPatternRotation: Math.PI * 0.5,
fillPatternRepeat: 'no-repeat',
@@ -223,12 +223,12 @@ suite('Shape-test', function() {
assert.equal(star.getFillPatternRotation(), Math.PI, 'star fill rotation should be Math.PI');
star.setFillPatternScale(1);
star.setFillPatternScale({x:1, y:1});
assert.equal(star.getFillPatternScale().x, 1, 'star fill scale x should be 1');
assert.equal(star.getFillPatternScale().y, 1, 'star fill scale y should be 1');
star.setFillPatternOffset([100, 120]);
star.setFillPatternOffset({x:100, y:120});
assert.equal(star.getFillPatternOffset().x, 100, 'star fill offset x should be 100');
assert.equal(star.getFillPatternOffset().y, 120, 'star fill offset y should be 120');
@@ -301,7 +301,7 @@ suite('Shape-test', function() {
circle.setFill(null);
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('no-repeat');
circle.setFillPatternOffset([-200, -70]);
circle.setFillPatternOffset({x:-200, y:-70});
assert.notEqual(circle.getFillPatternImage(), undefined, 'circle fill image should be defined');
assert.equal(circle.getFillPatternRepeat(), 'no-repeat', 'circle fill repeat should be no-repeat');
@@ -309,14 +309,14 @@ suite('Shape-test', function() {
assert.equal(circle.getFillPatternOffset().y, -70, 'circle fill offset y should be -70');
circle.setFillPatternImage(null);
circle.setFillLinearGradientStartPoint(-35);
circle.setFillLinearGradientEndPoint(35);
circle.setFillLinearGradientStartPoint({x:-35,y:-35});
circle.setFillLinearGradientEndPoint({x:35,y:35});
circle.setFillLinearGradientColorStops([0, 'red', 1, 'blue']);
circle.setFillLinearGradientStartPoint(null);
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('repeat');
circle.setFillPatternOffset(0);
circle.setFillPatternOffset({x:0,y:0});
layer.draw();
@@ -338,7 +338,7 @@ suite('Shape-test', function() {
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffset: {x:10, y:10},
dashArray: [10, 10],
scaleX: 3
});
@@ -403,7 +403,7 @@ suite('Shape-test', function() {
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffset: {x:10, y:10},
shadowOpacity: 0.5
});
@@ -436,7 +436,7 @@ suite('Shape-test', function() {
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffset: {x:10, y:10},
shadowOpacity: 0.5
});
@@ -468,7 +468,7 @@ suite('Shape-test', function() {
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOffset: {x:10, y:10},
shadowOpacity: 0.5,
draggable: true
});

72
test/unit/Stage-test.js
View File

@@ -91,10 +91,10 @@ suite('Stage', function() {
assert.equal(stage.getSize().width, 578);
assert.equal(stage.getSize().height, 200);
stage.setSize(1, 2);
stage.setSize({width:1, height:2});
assert.equal(stage.getSize().width, 1);
assert.equal(stage.getSize().height, 2);
stage.setSize(3);
stage.setSize({width: 3, height: 3});
assert.equal(stage.getSize().width, 3);
assert.equal(stage.getSize().height, 3);
stage.setSize({
@@ -103,27 +103,23 @@ suite('Stage', function() {
});
assert.equal(stage.getSize().width, 4);
assert.equal(stage.getSize().height, 5);
stage.setSize({
width: 6
});
stage.setWidth(6);
assert.equal(stage.getSize().width, 6);
assert.equal(stage.getSize().height, 5);
stage.setSize({
height: 7
});
stage.setHeight(7);
assert.equal(stage.getSize().width, 6);
assert.equal(stage.getSize().height, 7);
stage.setSize([8, 9]);
stage.setSize({width: 8, height: 9});
assert.equal(stage.getSize().width, 8);
assert.equal(stage.getSize().height, 9);
stage.setSize([1, 1, 10, 11]);
stage.setSize({width:10, height:11});
assert.equal(stage.getSize().width, 10);
assert.equal(stage.getSize().height, 11);
layer.add(circle);
stage.add(layer);
stage.setSize(333, 155);
stage.setSize({width:333, height:155});
assert.equal(stage.getSize().width, 333);
assert.equal(stage.getSize().height, 155);
@@ -169,9 +165,9 @@ suite('Stage', function() {
layer.add(greenCircle);
stage.add(layer);
assert.equal(stage.getIntersection(300, 100).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(stage.getIntersection(380, 100).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(stage.getIntersection(100, 100), null, 'shape should be null');
assert.equal(stage.getIntersection({x:300, y:100}).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(stage.getIntersection({x:380, y:100}).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(stage.getIntersection({x:100, y:100}), null, 'shape should be null');
});
@@ -213,10 +209,10 @@ suite('Stage', function() {
layer.add(greenCircle);
stage.add(layer);
assert.equal(stage.getIntersection(370, 93).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(stage.getIntersection({x:370, y:93}).getId(), 'greenCircle', 'shape should be greenCircle');
// TODO: this passes in the browser but fails in phantomjs. no idea why.
//assert.equal(stage.getIntersection(371, 93).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(stage.getIntersection(372, 93).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(stage.getIntersection({x:372, y:93}).getId(), 'redCircle', 'shape should be redCircle');
//console.log(layer.hitCanvas.context._context.getImageData(1, 1, 1, 1).data)
@@ -253,50 +249,50 @@ suite('Stage', function() {
stage.add(layer);
// test individual shapes
assert.equal(stage.getAllIntersections(266, 114).length, 1, '17) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections(266, 114)[0].getId(), 'greenCircle', '19) first intersection should be greenCircle');
assert.equal(stage.getAllIntersections({x: 266, y:114}).length, 1, '17) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections({x: 266, y:114})[0].getId(), 'greenCircle', '19) first intersection should be greenCircle');
assert.equal(stage.getAllIntersections(414, 115).length, 1, '18) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections(414, 115)[0].getId(), 'redCircle', '20) first intersection should be redCircle');
assert.equal(stage.getAllIntersections({x: 414, y:115}).length, 1, '18) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections({x: 414, y:115})[0].getId(), 'redCircle', '20) first intersection should be redCircle');
assert.equal(stage.getAllIntersections(350, 118).length, 2, '1) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections(350, 118)[0].getId(), 'redCircle', '2) first intersection should be redCircle');
assert.equal(stage.getAllIntersections(350, 118)[1].getId(), 'greenCircle', '3) second intersection should be greenCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118}).length, 2, '1) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections({x: 350, y:118})[0].getId(), 'redCircle', '2) first intersection should be redCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118})[1].getId(), 'greenCircle', '3) second intersection should be greenCircle');
// hide green circle. make sure only red circle is in result set
greenCircle.hide();
layer.draw();
assert.equal(stage.getAllIntersections(350, 118).length, 1, '4) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections(350, 118)[0].getId(), 'redCircle', '5) first intersection should be redCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118}).length, 1, '4) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections({x: 350, y:118})[0].getId(), 'redCircle', '5) first intersection should be redCircle');
// show green circle again. make sure both circles are in result set
greenCircle.show();
layer.draw();
assert.equal(stage.getAllIntersections(350, 118).length, 2, '6) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections(350, 118)[0].getId(), 'redCircle', '7) first intersection should be redCircle');
assert.equal(stage.getAllIntersections(350, 118)[1].getId(), 'greenCircle', '8) second intersection should be greenCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118}).length, 2, '6) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections({x: 350, y:118})[0].getId(), 'redCircle', '7) first intersection should be redCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118})[1].getId(), 'greenCircle', '8) second intersection should be greenCircle');
// hide red circle. make sure only green circle is in result set
redCircle.hide();
layer.draw();
assert.equal(stage.getAllIntersections(350, 118).length, 1, '9) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections(350, 118)[0].getId(), 'greenCircle', '10) first intersection should be greenCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118}).length, 1, '9) getAllIntersections should return one shape');
assert.equal(stage.getAllIntersections({x: 350, y:118})[0].getId(), 'greenCircle', '10) first intersection should be greenCircle');
// show red circle again. make sure both circles are in result set
redCircle.show();
layer.draw();
assert.equal(stage.getAllIntersections(350, 118).length, 2, '11) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections(350, 118)[0].getId(), 'redCircle', '12) first intersection should be redCircle');
assert.equal(stage.getAllIntersections(350, 118)[1].getId(), 'greenCircle', '13) second intersection should be greenCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118}).length, 2, '11) getAllIntersections should return two shapes');
assert.equal(stage.getAllIntersections({x: 350, y:118})[0].getId(), 'redCircle', '12) first intersection should be redCircle');
assert.equal(stage.getAllIntersections({x: 350, y:118})[1].getId(), 'greenCircle', '13) second intersection should be greenCircle');
// test from layer
assert.equal(layer.getAllIntersections(350, 118).length, 2, '14) getAllIntersections should return two shapes');
assert.equal(layer.getAllIntersections(350, 118)[0].getId(), 'redCircle', '15) first intersection should be redCircle');
assert.equal(layer.getAllIntersections(350, 118)[1].getId(), 'greenCircle', '16) second intersection should be greenCircle');
assert.equal(layer.getAllIntersections({x: 350, y:118}).length, 2, '14) getAllIntersections should return two shapes');
assert.equal(layer.getAllIntersections({x: 350, y:118})[0].getId(), 'redCircle', '15) first intersection should be redCircle');
assert.equal(layer.getAllIntersections({x: 350, y:118})[1].getId(), 'greenCircle', '16) second intersection should be greenCircle');
});
@@ -316,7 +312,7 @@ suite('Stage', function() {
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
stage.setScale({x:0.5, y:0.5});
assert.equal(stage.getScale().x, 0.5, 'stage scale x should be 0.5');
assert.equal(stage.getScale().y, 0.5, 'stage scale y should be 0.5');
@@ -336,7 +332,7 @@ suite('Stage', function() {
strokeWidth: 4
});
stage.setScale(0.5);
stage.setScale({x:0.5, y:0.5});
assert.equal(stage.getScale().x, 0.5, 'stage scale x should be 0.5');
assert.equal(stage.getScale().y, 0.5, 'stage scale y should be 0.5');

3
test/unit/filters/Blur-test.js
View File

@@ -207,9 +207,6 @@ suite('Blur', function() {
y: stage.getHeight() / 2,
sides: 3,
radius: 80,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
stroke: 'black',

2
test/unit/plugins/Path-test.js
View File

@@ -119,7 +119,7 @@ suite('Path', function() {
strokeWidth: 2,
shadowColor: 'maroon',
shadowBlur: 2,
shadowOffset: [10, 10],
shadowOffset: {x:10, y:10},
shadowOpacity: 0.5,
draggable: true
});

44
test/unit/shapes/Blob-test.js
View File

@@ -5,19 +5,7 @@ suite('Blob', function(){
var layer = new Kinetic.Layer();
var blob = new Kinetic.Line({
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 170
}],
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
@@ -51,19 +39,7 @@ suite('Blob', function(){
var blob = new Kinetic.Line({
tension: 0.8,
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 170
}],
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
@@ -75,7 +51,7 @@ suite('Blob', function(){
layer.add(blob);
stage.add(layer);
assert.equal(stage.find('Line')[0].getPoints().length, 4);
assert.equal(stage.find('Line')[0].getPoints().length, 8);
});
@@ -85,19 +61,7 @@ suite('Blob', function(){
var layer = new Kinetic.Layer();
var blob = new Kinetic.Line({
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 170
}],
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,

14
test/unit/shapes/Circle-test.js
View File

@@ -53,8 +53,8 @@ suite('Circle', function(){
y: stage.getHeight() / 2,
radius: 70,
fillPatternImage: imageObj,
fillPatternOffset: -5,
fillPatternScale: 0.7,
fillPatternOffset: {x: -5, y: -5},
fillPatternScale: {x: 0.7, y: 0.7},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
@@ -68,7 +68,7 @@ suite('Circle', function(){
assert.equal(circle.getFillPatternOffset().x, -5);
assert.equal(circle.getFillPatternOffset().y, -5);
circle.setFillPatternOffset(1, 2);
circle.setFillPatternOffset({x:1, y:2});
assert.equal(circle.getFillPatternOffset().x, 1);
assert.equal(circle.getFillPatternOffset().y, 2);
@@ -95,9 +95,9 @@ suite('Circle', function(){
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillRadialGradientStartPoint: -20,
fillRadialGradientStartPoint: {x: -20, y: -20},
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: -60,
fillRadialGradientEndPoint: {x: -60, y: -60},
fillRadialGradientEndRadius: 130,
fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
name: 'myCircle',
@@ -131,8 +131,8 @@ suite('Circle', function(){
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillLinearGradientStartPoint: -35,
fillLinearGradientEndPoint: 35,
fillLinearGradientStartPoint: {x:-35,y:-35},
fillLinearGradientEndPoint: {x:35,y:35},
fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,

2
test/unit/shapes/Ellipse-test.js
View File

@@ -7,7 +7,7 @@ suite('Ellipse', function(){
var ellipse = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: [70, 35],
radius: {x:70, y:35},
fill: 'green',
stroke: 'black',
strokeWidth: 8

50
test/unit/shapes/Image-test.js
View File

@@ -13,8 +13,8 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
crop: [135, 7, 167, 134],
offset: {x: 50, y: 30},
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -42,20 +42,6 @@ suite('Image', function(){
assert.equal(crop.width, 167);
assert.equal(crop.height, 134);
darth.setCrop(0, 1, 2, 3);
crop = darth.getCrop();
assert.equal(crop.x, 0);
assert.equal(crop.y, 1);
assert.equal(crop.width, 2);
assert.equal(crop.height, 3);
darth.setCrop([4, 5, 6, 7]);
crop = darth.getCrop();
assert.equal(crop.x, 4);
assert.equal(crop.y, 5);
assert.equal(crop.width, 6);
assert.equal(crop.height, 7);
darth.setCrop({
x: 8,
y: 9,
@@ -68,36 +54,28 @@ suite('Image', function(){
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
darth.setCrop({
x: 12
});
darth.setCropX(12);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 9);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
darth.setCrop({
y: 13
});
darth.setCropY(13);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
darth.setCrop({
width: 14
});
darth.setCropWidth(14);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 14);
assert.equal(crop.height, 11);
darth.setCrop({
height: 15
});
darth.setCropHeight(15);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
@@ -111,7 +89,7 @@ suite('Image', function(){
width: 100,
height: 100,
offset: [50, 30],
crop: [135, 7, 167, 134],
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -142,7 +120,7 @@ suite('Image', function(){
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 106, 74],
crop: {x:186, y:211, width:106, height:74},
draggable: true,
scale: [0.5, 0.5]
});
@@ -161,7 +139,7 @@ suite('Image', function(){
assert.equal(darth.getCropWidth(), 106);
assert.equal(darth.getCropHeight(), 74);
darth.setCrop([1, 2, 3, 4]);
darth.setCrop({x: 1, y: 2, width: 3, height: 4});
assert.equal(darth.getCrop().x, 1);
assert.equal(darth.getCrop().y, 2);
@@ -323,13 +301,13 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
offset: {x: 50, y:30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: 20
shadowOffset: {x: 20, y:20}
});
layer.add(darth);
@@ -337,7 +315,7 @@ suite('Image', function(){
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,438,300,0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,438,300,0,0,100,100);restore();');
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();');
done();
@@ -358,13 +336,13 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
offset: {x: 50, y: 30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: 20,
shadowOffset: {x:20, y:20},
stroke: 'red',
strokeWidth: 20
});

44
test/unit/shapes/Line-test.js
View File

@@ -4,16 +4,8 @@ suite('Line', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}];
var line = new Kinetic.Line({
points: points,
points: [73,160,340,23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
@@ -26,19 +18,13 @@ suite('Line', function() {
stage.add(layer);
line.setPoints([1, 2, 3, 4]);
assert.equal(line.getPoints()[0].x, 1);
assert.equal(line.getPoints()[0], 1);
line.setPoints([{
x: 5,
y: 6
}, {
x: 7,
y: 8
}]);
assert.equal(line.getPoints()[0].x, 5);
line.setPoints([5,6,7,8]);
assert.equal(line.getPoints()[0], 5);
line.setPoints([73, 160, 340, 23, 340, 80]);
assert.equal(line.getPoints()[0].x, 73);
assert.equal(line.getPoints()[0], 73);
assert.equal(line.getClassName(), 'Line');
@@ -74,8 +60,8 @@ suite('Line', function() {
layer.add(line).add(redLine);
stage.add(layer);
assert.equal(line.getPoints()[0].x, 0);
assert.equal(redLine.getPoints()[0].x, 4);
assert.equal(line.getPoints()[0], 0);
assert.equal(redLine.getPoints()[0], 4);
});
@@ -111,7 +97,7 @@ suite('Line', function() {
dashArray: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: [20, 20]
shadowOffset: {x:20, y:20}
//opacity: 0.2
});
@@ -122,7 +108,7 @@ suite('Line', function() {
line.setDashArray([10, 10]);
assert.equal(line.getDashArray().length, 2);
assert.equal(line.getPoints().length, 4);
assert.equal(line.getPoints().length, 8);
});
@@ -131,23 +117,15 @@ suite('Line', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}];
var line = new Kinetic.Line({
points: points,
points: [73,160,340,23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 20,
shadowOffset: 10,
shadowOffset: {x: 10, y: 10},
shadowOpacity: 0.5,
draggable: true
});

21
test/unit/shapes/Polygon-test.js
View File

@@ -3,26 +3,7 @@ suite('Polygon', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 192
}, {
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 499,
y: 139
}, {
x: 342,
y: 93
}];
var points = [73,192,73,160,340,23,500,109,499,139,342,93];
var poly = new Kinetic.Line({
points: points,

8
test/unit/shapes/Rect-test.js
View File

@@ -45,7 +45,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 +82,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
});

175
test/unit/shapes/Spline-test.js
View File

@@ -5,19 +5,7 @@ suite('Spline', function() {
var layer = new Kinetic.Layer();
var line1 = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
@@ -27,16 +15,7 @@ suite('Spline', function() {
});
var line2 = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}],
points: [73,160,340,23,500,109],
stroke: 'red',
strokeWidth: 10,
lineCap: 'round',
@@ -46,13 +25,7 @@ suite('Spline', function() {
});
var line3 = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}],
points: [73,160,340,23],
stroke: 'green',
strokeWidth: 10,
lineCap: 'round',
@@ -80,19 +53,7 @@ suite('Spline', function() {
var layer = new Kinetic.Layer();
var spline = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
@@ -105,21 +66,12 @@ suite('Spline', function() {
layer.add(spline);
stage.add(layer);
assert.equal(spline.getTensionPoints().length, 12);
spline.setPoints([73,160,340,23,500,109]);
assert.equal(spline.getTensionPoints().length, 6);
spline.setPoints([{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}]);
assert.equal(spline.getTensionPoints().length, 3);
layer.draw();
@@ -131,19 +83,7 @@ suite('Spline', function() {
var layer = new Kinetic.Layer();
var spline = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
@@ -156,100 +96,15 @@ suite('Spline', function() {
layer.add(spline);
stage.add(layer);
assert.equal(spline.getPoints().length, 4);
assert.equal(spline.getPoints().length, 8);
spline.addPoint({
x: 300,
y: 200
});
var points = spline.getPoints();
points.push(300);
points.push(200);
spline.clearCache();
assert.equal(spline.getPoints().length, 5);
assert.equal(spline.getPoints().length, 10);
layer.draw();
});
// ======================================================
test('create from points represented as a flat array', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
points: [
73, 160,
340, 23,
500, 109,
300, 109
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of objects', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of arrays', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
points: [
[73, 160],
[340, 23],
[500, 109],
[300, 109]
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
assert.equal(line.getPoints().length, 4);
});
});