lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:31:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

hooked setAttrs into setPosition and setScale for more flexibility. Added in depth position and scale unit tests. add() and remove() methods are now chainable

Browse Source
This commit is contained in:
Eric Rowell 2012-05-25 20:18:05 -07:00
parent 5526d2847e
commit 0bb158c0fb
9 changed files with 607 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: May 20 2012
* Date: May 25 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -163,34 +163,60 @@ Kinetic.GlobalObject = {
_isObject: function(obj) {
return obj === Object(obj);
},
_isNumber: function(obj) {
return toString.call(obj) == '[object Number]';
},
/*
* The argument can be array of integers, an object, an array of one element
* which is an array of integers, or an array of one element of an object
* 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) {
var go = Kinetic.GlobalObject;
if(arg === undefined) {
if(this._isNumber(arg)) {
return {
x: 0,
y: 0
x: arg,
y: arg
};
}
if(go._isArray(arg)) {
else if(this._isArray(arg)) {
// if arg is an array of one element
if(arg.length === 1) {
var val = arg[0];
if(go._isArray(val)) {
// 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]
};
}
else {
// 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 one element which is not
* a number, an array, or an object, return default
*/
else {
return {
x: 0,
y: 0
};
}
}
// if arg is an array of two or more elements
else {
return {
x: arg[0],
@ -198,9 +224,17 @@ Kinetic.GlobalObject = {
};
}
}
else {
// if arg is an object return the object
else if(this._isObject(arg)) {
return arg;
}
// if arg is not a number, array, or object, return default
else {
return {
x: 0,
y: 0
};
}
},
/*
* The argument can be array of integers, an object, an array of one element
@ -468,8 +502,7 @@ Kinetic.Node.prototype = {
// handle special keys
switch (key) {
/*
* config properties that require a method to
* be set
* config properties that require a method
*/
case 'draggable':
that.draggable(c[key]);
@ -585,20 +618,13 @@ Kinetic.Node.prototype = {
return level;
},
/**
* set node scale. If only one parameter is passed in,
* then both scaleX and scaleY are set with that parameter
* @param {Number} scaleX
* @param {Number} scaleY
* set node scale.
* @param arg
*/
setScale: function(scaleX, scaleY) {
if(scaleY !== undefined) {
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleY;
}
else {
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleX;
}
setScale: function() {
this.setAttrs({
scale: arguments
});
},
/**
* get scale
@ -612,8 +638,7 @@ Kinetic.Node.prototype = {
*/
setPosition: function() {
var pos = Kinetic.GlobalObject._getXY(arguments);
this.attrs.x = pos.x;
this.attrs.y = pos.y;
this.setAttrs(pos);
},
/**
* set node x position
@ -696,15 +721,6 @@ Kinetic.Node.prototype = {
y: 1
};
/*
this.attrs.centerOffset = {
x: 0,
y: 0
};
*/
//this.move(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
@ -716,15 +732,12 @@ Kinetic.Node.prototype = {
this.setPosition(pos.x, pos.y);
//this.move(-1* this.attrs.centerOffset.x, -1* this.attrs.centerOffset.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount
@ -1683,6 +1696,8 @@ Kinetic.Stage.prototype = {
catch(e) {
}
this._remove(layer);
return this;
},
/**
* add layer to stage
@ -1703,6 +1718,8 @@ Kinetic.Stage.prototype = {
* the layer draws associated with adding a node
*/
layer.lastDrawTime = 0;
return this;
},
/**
* get mouse position for desktop apps
@ -2434,6 +2451,7 @@ Kinetic.Layer.prototype = {
*/
add: function(child) {
this._add(child);
return this;
},
/**
* remove a child from the layer
@ -2441,6 +2459,7 @@ Kinetic.Layer.prototype = {
*/
remove: function(child) {
this._remove(child);
return this;
},
/**
* private draw children
@ -2504,6 +2523,7 @@ Kinetic.Group.prototype = {
*/
add: function(child) {
this._add(child);
return this;
},
/**
* remove a child node from the group
@ -2511,6 +2531,7 @@ Kinetic.Group.prototype = {
*/
remove: function(child) {
this._remove(child);
return this;
},
/**
* draw children
@ -2801,7 +2822,7 @@ Kinetic.Shape.prototype = {
* set shadow object
* @param {Object} config
*/
setShadowColor: function(config) {
setShadow: function(config) {
this.attrs.shadow = config;
},
/**

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

60
src/GlobalObject.js
View File

@ -135,34 +135,60 @@ Kinetic.GlobalObject = {
_isObject: function(obj) {
return obj === Object(obj);
},
_isNumber: function(obj) {
return toString.call(obj) == '[object Number]';
},
/*
* The argument can be array of integers, an object, an array of one element
* which is an array of integers, or an array of one element of an object
* 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) {
var go = Kinetic.GlobalObject;
if(arg === undefined) {
if(this._isNumber(arg)) {
return {
x: 0,
y: 0
x: arg,
y: arg
};
}
if(go._isArray(arg)) {
else if(this._isArray(arg)) {
// if arg is an array of one element
if(arg.length === 1) {
var val = arg[0];
if(go._isArray(val)) {
// 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]
};
}
else {
// 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 one element which is not
* a number, an array, or an object, return default
*/
else {
return {
x: 0,
y: 0
};
}
}
// if arg is an array of two or more elements
else {
return {
x: arg[0],
@ -170,9 +196,17 @@ Kinetic.GlobalObject = {
};
}
}
else {
// if arg is an object return the object
else if(this._isObject(arg)) {
return arg;
}
// if arg is not a number, array, or object, return default
else {
return {
x: 0,
y: 0
};
}
},
/*
* The argument can be array of integers, an object, an array of one element

2
src/Group.js
View File

@ -26,6 +26,7 @@ Kinetic.Group.prototype = {
*/
add: function(child) {
this._add(child);
return this;
},
/**
* remove a child node from the group
@ -33,6 +34,7 @@ Kinetic.Group.prototype = {
*/
remove: function(child) {
this._remove(child);
return this;
},
/**
* draw children

2
src/Layer.js
View File

@ -119,6 +119,7 @@ Kinetic.Layer.prototype = {
*/
add: function(child) {
this._add(child);
return this;
},
/**
* remove a child from the layer
@ -126,6 +127,7 @@ Kinetic.Layer.prototype = {
*/
remove: function(child) {
this._remove(child);
return this;
},
/**
* private draw children

37
src/Node.js
View File

@ -168,8 +168,7 @@ Kinetic.Node.prototype = {
// handle special keys
switch (key) {
/*
* config properties that require a method to
* be set
* config properties that require a method
*/
case 'draggable':
that.draggable(c[key]);
@ -285,20 +284,13 @@ Kinetic.Node.prototype = {
return level;
},
/**
* set node scale. If only one parameter is passed in,
* then both scaleX and scaleY are set with that parameter
* @param {Number} scaleX
* @param {Number} scaleY
* set node scale.
* @param arg
*/
setScale: function(scaleX, scaleY) {
if(scaleY !== undefined) {
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleY;
}
else {
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleX;
}
setScale: function() {
this.setAttrs({
scale: arguments
});
},
/**
* get scale
@ -312,8 +304,7 @@ Kinetic.Node.prototype = {
*/
setPosition: function() {
var pos = Kinetic.GlobalObject._getXY(arguments);
this.attrs.x = pos.x;
this.attrs.y = pos.y;
this.setAttrs(pos);
},
/**
* set node x position
@ -396,15 +387,6 @@ Kinetic.Node.prototype = {
y: 1
};
/*
this.attrs.centerOffset = {
x: 0,
y: 0
};
*/
//this.move(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
@ -416,15 +398,12 @@ Kinetic.Node.prototype = {
this.setPosition(pos.x, pos.y);
//this.move(-1* this.attrs.centerOffset.x, -1* this.attrs.centerOffset.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount

2
src/Shape.js
View File

@ -273,7 +273,7 @@ Kinetic.Shape.prototype = {
* set shadow object
* @param {Object} config
*/
setShadowColor: function(config) {
setShadow: function(config) {
this.attrs.shadow = config;
},
/**

4
src/Stage.js
View File

@ -307,6 +307,8 @@ Kinetic.Stage.prototype = {
catch(e) {
}
this._remove(layer);
return this;
},
/**
* add layer to stage
@ -327,6 +329,8 @@ Kinetic.Stage.prototype = {
* the layer draws associated with adding a node
*/
layer.lastDrawTime = 0;
return this;
},
/**
* get mouse position for desktop apps

639
tests/js/unitTests.js
View File

@ -448,6 +448,59 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
'STAGE - test getShapesInPoint': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var fooLayer = new Kinetic.Layer();
var group = new Kinetic.Group();
var blue = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
name: 'blue'
});
var red = new Kinetic.Rect({
x: 250,
y: 100,
width: 100,
height: 50,
fill: 'red'
});
group.add(red);
layer.add(blue);
layer.add(group);
stage.add(layer);
stage.add(fooLayer);
test(stage.getIntersections({
x: 201,
y: 101
}).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101)[0].getName() === 'blue', 'shape name should be blue');
test(stage.getIntersections({
x: 251,
y: 101
}).length === 2, 'should be 2 shapes ');
test(stage.getIntersections({
x: 350,
y: 150
}).length === 1, 'should be 1 shape ');
},
'STAGE - scale stage after add layer': function(containerId) {
var stage = new Kinetic.Stage({
@ -603,6 +656,30 @@ Test.prototype.tests = {
test(stage.names.myRect[0] === undefined, 'rect still in hash');
},
'STAGE - set shape and layer alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setAlpha(0.5);
layer.setAlpha(0.5);
layer.add(circle);
stage.add(layer);
test(circle.getAbsoluteAlpha() === 0.25, 'abs alpha should be 0.25');
test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
},
'STAGE - remove shape without adding its parent to stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -750,6 +827,61 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - serialize stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
centerOffset: {
x: 50,
y: imageObj.height / 2
},
id: 'darth'
});
layer.add(darth);
stage.add(layer);
var json = stage.toJSON();
test(json === '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}', 'problem serializing stage with image');
};
imageObj.src = '../darth-vader.jpg';
},
'STAGE - load stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json);
var image = stage.get('#darth')[0];
image.setImage(imageObj);
stage.draw();
};
imageObj.src = '../darth-vader.jpg';
},
////////////////////////////////////////////////////////////////////////
// LAYERS tests
////////////////////////////////////////////////////////////////////////
@ -858,6 +990,24 @@ Test.prototype.tests = {
test(layer.children.length === 0, 'layer should have 0 children');
},
////////////////////////////////////////////////////////////////////////
// GROUPS tests
////////////////////////////////////////////////////////////////////////
@ -934,10 +1084,25 @@ Test.prototype.tests = {
blueGroup2.add(blueCircle2);
blueLayer.add(blueGroup2);
blueLayer.draw();
blueGroup2.setPosition(100, 0);
blueLayer.draw();
},
////////////////////////////////////////////////////////////////////////
// SHAPES tests
////////////////////////////////////////////////////////////////////////
@ -1055,6 +1220,7 @@ Test.prototype.tests = {
test(darth.getHeight() === 100, 'height should be 100');
test(darth.getCenterOffset().x === 50, 'center offset x should be 50');
test(darth.getCenterOffset().y === 30, 'center offset y should be 30');
test(Kinetic.GlobalObject._isElement(darth.getImage()), 'darth image should be an element');
var crop = darth.getCrop();
@ -1191,51 +1357,6 @@ Test.prototype.tests = {
};
imageObj.src = '../scorpion-sprite.png';
},
'STAGE - serialize stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
centerOffset: {
x: 50,
y: imageObj.height / 2
},
id: 'darth'
});
layer.add(darth);
stage.add(layer);
var json = stage.toJSON();
test(json === '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}', 'problem serializing stage with image');
};
imageObj.src = '../darth-vader.jpg';
},
'STAGE - load stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json);
var image = stage.get('#darth')[0];
image.setImage(imageObj);
stage.draw();
};
imageObj.src = '../darth-vader.jpg';
},
'SHAPES - add polygon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1610,6 +1731,47 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
},
'SHAPES - scale shape by half': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
layer.add(circle);
stage.add(layer);
},
'SHAPES - scale shape by half then back to 1': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
circle.setScale(1, 1);
layer.add(circle);
stage.add(layer);
},
'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1859,6 +2021,22 @@ Test.prototype.tests = {
y: 151
}) === false, 'intersects with point in shape');
},
'CONTAINER - node type selector': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1910,60 +2088,12 @@ Test.prototype.tests = {
test(group.get('Group').length === 0, 'group should have 0 groups');
},
'STAGE - test getShapesInPoint': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var fooLayer = new Kinetic.Layer();
var group = new Kinetic.Group();
var blue = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
name: 'blue'
});
var red = new Kinetic.Rect({
x: 250,
y: 100,
width: 100,
height: 50,
fill: 'red'
});
group.add(red);
layer.add(blue);
layer.add(group);
stage.add(layer);
stage.add(fooLayer);
test(stage.getIntersections({
x: 201,
y: 101
}).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101)[0].getName() === 'blue', 'shape name should be blue');
test(stage.getIntersections({
x: 251,
y: 101
}).length === 2, 'should be 2 shapes ');
test(stage.getIntersections({
x: 350,
y: 150
}).length === 1, 'should be 1 shape ');
},
'Text - add text': function(containerId) {
'SHAPES - add text': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2031,7 +2161,7 @@ Test.prototype.tests = {
test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10');
},
'Text - get metrics': function(containerId) {
'SHAPES - get text metrics': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2121,6 +2251,229 @@ Test.prototype.tests = {
layer.draw();
},
'NODE - test setPosition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: 100,
height: 50,
fill: 'red'
});
layer.add(rect);
stage.add(layer);
rect.setPosition(1, 2);
test(rect.getPosition().x ===1, 'rect x should be 1');
test(rect.getPosition().y === 2, 'rect y should be 2');
rect.setPosition([3, 4]);
test(rect.getPosition().x ===3, 'rect x should be 3');
test(rect.getPosition().y === 4, 'rect y should be 4');
rect.setPosition({x: 5, y:6});
test(rect.getPosition().x ===5, 'rect x should be 5');
test(rect.getPosition().y === 6, 'rect y should be 6');
rect.setPosition({x: 7});
test(rect.getPosition().x ===7, 'rect x should be 7');
test(rect.getPosition().y === 6, 'rect y should be 6');
rect.setPosition({y: 8});
test(rect.getPosition().x ===7, 'rect x should be 7');
test(rect.getPosition().y === 8, 'rect y should be 8');
},
'NODE - test setScale': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.setScale(2, 3);
test(rect.getScale().x === 2, 'rect scale x should be 2');
test(rect.getScale().y=== 3, 'rect scale x should be 3');
rect.setScale(4);
test(rect.getScale().x === 4, 'rect scale x should be 4');
test(rect.getScale().y=== 4, 'rect scale x should be 4');
rect.setScale([5, 6]);
test(rect.getScale().x === 5, 'rect scale x should be 5');
test(rect.getScale().y=== 6, 'rect scale x should be 6');
rect.setScale([7, 8, 999, 999]);
test(rect.getScale().x === 7, 'rect scale x should be 7');
test(rect.getScale().y=== 8, 'rect scale x should be 8');
rect.setScale({x: 9, y:10});
test(rect.getScale().x === 9, 'rect scale x should be 9');
test(rect.getScale().y=== 10, 'rect scale x should be 10');
},
'NODE - test config scale': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect1 = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
scale: {
x: 2,
y: 3
}
});
var rect2 = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
scale: 2
});
var rect3 = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
scale: [2, 3]
});
var rect4 = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
scale: {x : 2}
});
var rect5 = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
scale: {y : 2}
});
layer.add(rect1).add(rect2).add(rect3).add(rect4).add(rect5);
stage.add(layer);
test(rect1.getScale().x === 2, 'rect1 scale x should be 2');
test(rect1.getScale().y === 3, 'rect1 scale y should be 3');
test(rect2.getScale().x === 2, 'rect2 scale x should be 2');
test(rect2.getScale().y === 2, 'rect2 scale y should be 2');
test(rect3.getScale().x === 2, 'rect3 scale x should be 2');
test(rect3.getScale().y === 3, 'rect3 scale y should be 3');
test(rect4.getScale().x === 2, 'rect4 scale x should be 2');
test(rect4.getScale().y === 1, 'rect4 scale y should be 1');
test(rect5.getScale().x === 1, 'rect5 scale x should be 1');
test(rect5.getScale().y === 2, 'rect5 scale y should be 2');
},
'NODE - test config position': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect1 = new Kinetic.Rect({
x: 1,
y: 2,
width: 100,
height: 50,
fill: 'red'
});
var rect2 = new Kinetic.Rect({
x: 3,
width: 100,
height: 50,
fill: 'red'
});
var rect3 = new Kinetic.Rect({
y: 4,
width: 100,
height: 50,
fill: 'red'
});
var rect4 = new Kinetic.Rect({
width: 100,
height: 50,
fill: 'red'
});
layer.add(rect1).add(rect2).add(rect3).add(rect4);
stage.add(layer);
test(rect1.getPosition().x === 1, 'rect1 x should be 1');
test(rect1.getPosition().y === 2, 'rect1 y should be 2');
test(rect2.getPosition().x === 3, 'rect2 x should be 3');
test(rect2.getPosition().y === 0, 'rect2 y should be 0');
test(rect3.getPosition().x === 0, 'rect3 x should be 0');
test(rect3.getPosition().y === 4, 'rect3 y should be 4');
test(rect4.getPosition().x === 0, 'rect4 x should be 0');
test(rect4.getPosition().y === 0, 'rect4 y should be 0');
},
'NODE - test getPosition and getAbsolutePosition for shape inside transformed stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -2455,6 +2808,19 @@ Test.prototype.tests = {
layer.add(circle);
layer.draw();
},
'TRANSFORMS - move shape, group, and layer, and then get absolute position': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -2609,71 +2975,16 @@ Test.prototype.tests = {
test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1');
},
'STAGE - set shape and layer alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setAlpha(0.5);
layer.setAlpha(0.5);
layer.add(circle);
stage.add(layer);
test(circle.getAbsoluteAlpha() === 0.25, 'abs alpha should be 0.25');
test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
},
'SHAPES - scale shape by half': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
layer.add(circle);
stage.add(layer);
},
'SHAPES - scale shape by half then back to 1': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle.setScale(0.5, 1);
circle.setScale(1, 1);
layer.add(circle);
stage.add(layer);
},
////////////////////////////////////////////////////////////////////////
// LAYERING tests
////////////////////////////////////////////////////////////////////////