lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +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

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
});

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

@@ -3,27 +3,8 @@ 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,
fill: 'green',

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);
});
});