lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 13:26:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

setup prettier and make all code better

Browse Source
This commit is contained in:
Anton Lavrenov
2017-02-24 09:15:33 -05:00
parent bfb859cfca
commit 59cc7b99f2
124 changed files with 47390 additions and 41165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
test/unit/shapes/Arc-test.js
View File

@@ -1,117 +1,119 @@
suite('Arc', function() {
// ======================================================
test('add arc', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
layer.add(arc);
stage.add(layer);
assert.equal(arc.getClassName(), 'Arc');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
// ======================================================
test('add arc', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
// ======================================================
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
layer.add(arc);
stage.add(layer);
layer.add(arc);
stage.add(layer);
assert.equal(arc.getWidth(), 160);
assert.equal(arc.getHeight(), 160);
assert.equal(arc.getClassName(), 'Arc');
arc.setWidth(100);
assert.equal(arc.outerRadius(), 50);
assert.equal(arc.getHeight(), 100);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
arc.setHeight(120);
assert.equal(arc.outerRadius(), 60);
assert.equal(arc.getHeight(), 120);
// ======================================================
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
layer.add(arc);
stage.add(layer);
assert.equal(arc.getWidth(), 160);
assert.equal(arc.getHeight(), 160);
layer.add(arc);
stage.add(layer);
arc.setWidth(100);
assert.equal(arc.outerRadius(), 50);
assert.equal(arc.getHeight(), 100);
assert.deepEqual(arc.getSelfRect(), {
x : -80,
y : -80,
width : 160,
height : 160
});
arc.setHeight(120);
assert.equal(arc.outerRadius(), 60);
assert.equal(arc.getHeight(), 120);
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myArc',
draggable: true
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
});
layer.add(arc);
stage.add(layer);
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
x: -80,
y: -80,
width: 160,
height: 160
});
});
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 80, 0, Math.PI / 2, false);
context.arc(100, 100, 50, Math.PI / 2, 0, true);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 4;
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arc = new Konva.Arc({
x: 100,
y: 100,
innerRadius: 50,
outerRadius: 80,
angle: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
});
layer.add(arc);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 80, 0, Math.PI / 2, false);
context.arc(100, 100, 50, Math.PI / 2, 0, true);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 4;
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
});
});

70
test/unit/shapes/Arrow-test.js
View File

@@ -1,38 +1,38 @@
suite('Arrow', function() {
// ======================================================
test('add arrow', function() {
var stage = addStage();
var layer = new Konva.Layer();
// ======================================================
test('add arrow', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arrow = new Konva.Arrow({
points: [73,160, 340, 23],
stroke: 'blue',
fill : 'blue',
strokeWidth: 1,
draggable: true,
tension: 0
});
layer.add(arrow);
stage.add(layer);
arrow.setPoints([1, 2, 3, 4]);
assert.equal(arrow.points()[0], 1);
arrow.setPoints([5,6,7,8]);
assert.equal(arrow.getPoints()[0], 5);
arrow.setPoints([73, 160, 340, 23, 50,100, 80, 50]);
arrow.tension(0);
arrow.pointerLength(15);
assert.equal(arrow.pointerLength(), 15);
arrow.pointerWidth(15);
assert.equal(arrow.pointerWidth(), 15);
assert.equal(arrow.getClassName(), 'Arrow');
layer.draw();
showHit(layer);
var arrow = new Konva.Arrow({
points: [73, 160, 340, 23],
stroke: 'blue',
fill: 'blue',
strokeWidth: 1,
draggable: true,
tension: 0
});
});
layer.add(arrow);
stage.add(layer);
arrow.setPoints([1, 2, 3, 4]);
assert.equal(arrow.points()[0], 1);
arrow.setPoints([5, 6, 7, 8]);
assert.equal(arrow.getPoints()[0], 5);
arrow.setPoints([73, 160, 340, 23, 50, 100, 80, 50]);
arrow.tension(0);
arrow.pointerLength(15);
assert.equal(arrow.pointerLength(), 15);
arrow.pointerWidth(15);
assert.equal(arrow.pointerWidth(), 15);
assert.equal(arrow.getClassName(), 'Arrow');
layer.draw();
showHit(layer);
});
});

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

@@ -1,118 +1,118 @@
suite('Blob', function(){
// ======================================================
test('add blob', function() {
var stage = addStage();
var layer = new Konva.Layer();
suite('Blob', function() {
// ======================================================
test('add blob', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8,
closed: true
});
layer.add(blob);
stage.add(layer);
assert.equal(blob.getTension(), 0.8);
assert.equal(blob.getClassName(), 'Line');
//console.log(blob1.getPoints())
// test setter
blob.setTension(1.5);
assert.equal(blob.getTension(), 1.5);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore();');
var blob = new Konva.Line({
points: [73, 140, 340, 23, 500, 109, 300, 170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8,
closed: true
});
// ======================================================
test('define tension first', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(blob);
stage.add(layer);
assert.equal(blob.getTension(), 0.8);
var blob = new Konva.Line({
tension: 0.8,
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
closed: true
assert.equal(blob.getClassName(), 'Line');
});
//console.log(blob1.getPoints())
layer.add(blob);
stage.add(layer);
// test setter
blob.setTension(1.5);
assert.equal(blob.getTension(), 1.5);
assert.equal(stage.find('Line')[0].getPoints().length, 8);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore();'
);
});
// ======================================================
test('define tension first', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
tension: 0.8,
points: [73, 140, 340, 23, 500, 109, 300, 170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
closed: true
});
// ======================================================
test('check for konva event handlers', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(blob);
stage.add(layer);
var blob = new Konva.Line({
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8,
closed: true
});
assert.equal(stage.find('Line')[0].getPoints().length, 8);
});
layer.add(blob);
// ======================================================
test('check for konva event handlers', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
assert.equal(blob.eventListeners.pointsChange[0].name, 'konva');
assert.equal(blob.eventListeners.tensionChange[0].name, 'konva');
// removing handlers should not remove konva specific handlers
blob.off('pointsChange');
blob.off('tensionChange');
assert.equal(blob.eventListeners.pointsChange[0].name, 'konva');
assert.equal(blob.eventListeners.tensionChange[0].name, 'konva');
// you can force remove an event by adding the name
blob.off('pointsChange.konva');
blob.off('tensionChange.konva');
assert.equal(blob.eventListeners.pointsChange, undefined);
assert.equal(blob.eventListeners.tensionChange, undefined);
var blob = new Konva.Line({
points: [73, 140, 340, 23, 500, 109, 300, 170],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8,
closed: true
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x : 50,
y : 50,
points: [-25,50,250,-30,150,50,250,110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.3,
closed: true
});
layer.add(blob);
blob.cache();
layer.add(blob);
stage.add(layer);
stage.add(layer);
if (!window.isPhantomJS) {
cloneAndCompareLayer(layer, 100);
}
assert.equal(blob.eventListeners.pointsChange[0].name, 'konva');
assert.equal(blob.eventListeners.tensionChange[0].name, 'konva');
// removing handlers should not remove konva specific handlers
blob.off('pointsChange');
blob.off('tensionChange');
assert.equal(blob.eventListeners.pointsChange[0].name, 'konva');
assert.equal(blob.eventListeners.tensionChange[0].name, 'konva');
// you can force remove an event by adding the name
blob.off('pointsChange.konva');
blob.off('tensionChange.konva');
assert.equal(blob.eventListeners.pointsChange, undefined);
assert.equal(blob.eventListeners.tensionChange, undefined);
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.3,
closed: true
});
blob.cache();
layer.add(blob);
stage.add(layer);
if (!window.isPhantomJS) {
cloneAndCompareLayer(layer, 100);
}
});
});

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

@@ -1,19 +1,19 @@
suite('Circle', function(){
suite('Circle', function() {
// ======================================================
test('add circle to stage', function(){
test('add circle to stage', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
@@ -21,7 +21,6 @@ suite('Circle', function(){
group.add(circle);
layer.draw();
var attrs = circle.getAttrs();
assert.equal(attrs.x, 100);
@@ -34,245 +33,242 @@ suite('Circle', function(){
assert.equal(attrs.draggable, true);
assert.equal(circle.getClassName(), 'Circle');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
assert.equal(
trace,
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
test('clone', function() {
var circle = new Konva.Circle();
var clone = circle.clone();
assert.equal(clone instanceof Konva.Circle, true);
assert.equal(clone.className, 'Circle');
var circle = new Konva.Circle();
var clone = circle.clone();
assert.equal(clone instanceof Konva.Circle, true);
assert.equal(clone.className, 'Circle');
});
// ======================================================
test('add circle with pattern fill', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillPatternImage: imageObj,
fillPatternOffset: {x: -5, y: -5},
fillPatternScale: {x: 0.7, y: 0.7},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.getFillPatternOffset().x, -5);
assert.equal(circle.getFillPatternOffset().y, -5);
circle.setFillPatternOffset({x:1, y:2});
assert.equal(circle.getFillPatternOffset().x, 1);
assert.equal(circle.getFillPatternOffset().y, 2);
circle.setFillPatternOffset({
x: 3,
y: 4
});
assert.equal(circle.getFillPatternOffset().x, 3);
assert.equal(circle.getFillPatternOffset().y, 4);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('add circle with radial gradient fill', function() {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillRadialGradientStartPoint: {x: -20, y: -20},
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: {x: -60, y: -60},
fillRadialGradientEndRadius: 130,
fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
name: 'myCircle',
draggable: true,
scale: {
x: 0.5,
y: 0.5
}
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillPatternImage: imageObj,
fillPatternOffset: { x: -5, y: -5 },
fillPatternScale: { x: 0.7, y: 0.7 },
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.getFillRadialGradientStartPoint().x, -20);
assert.equal(circle.getFillRadialGradientStartPoint().y, -20);
assert.equal(circle.getFillRadialGradientStartRadius(), 0);
assert.equal(circle.getFillRadialGradientEndPoint().x, -60);
assert.equal(circle.getFillRadialGradientEndPoint().y, -60);
assert.equal(circle.getFillRadialGradientEndRadius(), 130);
assert.equal(circle.getFillRadialGradientColorStops().length, 6);
assert.equal(circle.getFillPatternOffset().x, -5);
assert.equal(circle.getFillPatternOffset().y, -5);
circle.setFillPatternOffset({ x: 1, y: 2 });
assert.equal(circle.getFillPatternOffset().x, 1);
assert.equal(circle.getFillPatternOffset().y, 2);
circle.setFillPatternOffset({
x: 3,
y: 4
});
assert.equal(circle.getFillPatternOffset().x, 3);
assert.equal(circle.getFillPatternOffset().y, 4);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('add circle with radial gradient fill', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillRadialGradientStartPoint: { x: -20, y: -20 },
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: { x: -60, y: -60 },
fillRadialGradientEndRadius: 130,
fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
name: 'myCircle',
draggable: true,
scale: {
x: 0.5,
y: 0.5
}
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.getFillRadialGradientStartPoint().x, -20);
assert.equal(circle.getFillRadialGradientStartPoint().y, -20);
assert.equal(circle.getFillRadialGradientStartRadius(), 0);
assert.equal(circle.getFillRadialGradientEndPoint().x, -60);
assert.equal(circle.getFillRadialGradientEndPoint().y, -60);
assert.equal(circle.getFillRadialGradientEndRadius(), 130);
assert.equal(circle.getFillRadialGradientColorStops().length, 6);
});
// ======================================================
test('add shape with linear gradient fill', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillLinearGradientStartPoint: {x:-35,y:-35},
fillLinearGradientEndPoint: {x:35,y:35},
fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fillLinearGradientStartPoint: { x: -35, y: -35 },
fillLinearGradientEndPoint: { x: 35, y: 35 },
fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.getName(), 'myCircle');
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.getName(), 'myCircle');
});
// ======================================================
test('set opacity after instantiation', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
group.add(circle);
layer.add(group);
stage.add(layer);
group.add(circle);
layer.add(group);
stage.add(layer);
circle.setOpacity(0.5);
layer.draw();
circle.setOpacity(0.5);
layer.draw();
circle.setOpacity(0.5);
layer.draw();
circle.setOpacity(0.5);
layer.draw();
});
// ======================================================
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
layer.add(circle);
stage.add(layer);
assert.equal(circle.getWidth(), 140);
assert.equal(circle.getHeight(), 140);
assert.equal(circle.getWidth(), 140);
assert.equal(circle.getHeight(), 140);
circle.setWidth(100);
assert.equal(circle.radius(), 50);
assert.equal(circle.getHeight(), 100);
circle.setWidth(100);
assert.equal(circle.radius(), 50);
assert.equal(circle.getHeight(), 100);
circle.setHeight(120);
assert.equal(circle.radius(), 60);
assert.equal(circle.getHeight(), 120);
circle.setHeight(120);
assert.equal(circle.radius(), 60);
assert.equal(circle.getHeight(), 120);
});
// ======================================================
test('set fill after instantiation', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
circle.setFill('blue');
circle.setFill('blue');
stage.add(layer);
stage.add(layer);
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(circle);
stage.add(layer);
assert.deepEqual(circle.getSelfRect(), {
x : -50,
y : -50,
width : 100,
height : 100
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
layer.add(circle);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 4;
context.stroke();
compareLayerAndCanvas(layer, canvas, 100);
assert.deepEqual(circle.getSelfRect(), {
x: -50,
y: -50,
width: 100,
height: 100
});
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 4;
context.stroke();
compareLayerAndCanvas(layer, canvas, 100);
});
});

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

@@ -1,101 +1,110 @@
suite('Ellipse', function(){
// ======================================================
test('add ellipse', function(){
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {x:70, y:35},
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
assert.equal(ellipse.getClassName(), 'Ellipse');
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();');
suite('Ellipse', function() {
// ======================================================
test('add ellipse', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: { x: 70, y: 35 },
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
assert.equal(ellipse.getClassName(), 'Ellipse');
// ======================================================
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {x:70, y:35},
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();'
);
});
assert.equal(ellipse.getWidth(), 140);
assert.equal(ellipse.getHeight(), 70);
ellipse.setWidth(100);
assert.equal(ellipse.radiusX(), 50);
assert.equal(ellipse.radiusY(), 35);
ellipse.setHeight(120);
assert.equal(ellipse.radiusX(), 50);
assert.equal(ellipse.radiusY(), 60);
// ======================================================
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: { x: 70, y: 35 },
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {x:70, y:35},
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
assert.equal(ellipse.getWidth(), 140);
assert.equal(ellipse.getHeight(), 70);
assert.deepEqual(ellipse.getSelfRect(), {
x : -70,
y : -35,
width : 140,
height : 70
});
ellipse.setWidth(100);
assert.equal(ellipse.radiusX(), 50);
assert.equal(ellipse.radiusY(), 35);
ellipse.setHeight(120);
assert.equal(ellipse.radiusX(), 50);
assert.equal(ellipse.radiusY(), 60);
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: { x: 70, y: 35 },
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {x:70, y:35},
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
ellipse.cache();
layer.add(ellipse);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.save();
context.beginPath();
context.scale(1, 0.5);
context.arc(stage.getWidth() / 2, stage.getHeight(), 70, 0, Math.PI * 2, false);
context.closePath();
context.restore();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 8;
context.stroke();
compareLayerAndCanvas(layer, canvas, 80);
assert.deepEqual(ellipse.getSelfRect(), {
x: -70,
y: -35,
width: 140,
height: 70
});
});
test('cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ellipse = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: { x: 70, y: 35 },
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
ellipse.cache();
layer.add(ellipse);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.save();
context.beginPath();
context.scale(1, 0.5);
context.arc(
stage.getWidth() / 2,
stage.getHeight(),
70,
0,
Math.PI * 2,
false
);
context.closePath();
context.restore();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 8;
context.stroke();
compareLayerAndCanvas(layer, canvas, 80);
});
});

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

@@ -1,366 +1,370 @@
suite('Image', function(){
suite('Image', function() {
// ======================================================
test('add image', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y: 30},
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: { x: 50, y: 30 },
crop: { x: 135, y: 7, width: 167, height: 134 },
draggable: true
});
layer.add(darth);
stage.add(layer);
layer.add(darth);
stage.add(layer);
darth.setHeight(200);
layer.draw();
darth.setHeight(200);
layer.draw();
darth.setHeight(100);
layer.draw();
darth.setHeight(100);
layer.draw();
assert.equal(darth.getX(), 200);
assert.equal(darth.getY(), 60);
assert.equal(darth.getWidth(), 100);
assert.equal(darth.getHeight(), 100);
assert.equal(darth.offset().x, 50);
assert.equal(darth.offset().y, 30);
assert.equal(Konva.Util._isElement(darth.getImage()), true);
assert.equal(darth.getX(), 200);
assert.equal(darth.getY(), 60);
assert.equal(darth.getWidth(), 100);
assert.equal(darth.getHeight(), 100);
assert.equal(darth.offset().x, 50);
assert.equal(darth.offset().y, 30);
assert.equal(Konva.Util._isElement(darth.getImage()), true);
var crop = null;
crop = darth.getCrop();
var crop = null;
crop = darth.getCrop();
assert.equal(crop.x, 135);
assert.equal(crop.y, 7);
assert.equal(crop.width, 167);
assert.equal(crop.height, 134);
assert.equal(crop.x, 135);
assert.equal(crop.y, 7);
assert.equal(crop.width, 167);
assert.equal(crop.height, 134);
darth.setCrop({
x: 8,
y: 9,
width: 10,
height: 11
});
crop = darth.getCrop();
assert.equal(crop.x, 8);
assert.equal(crop.y, 9);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
darth.setCrop({
x: 8,
y: 9,
width: 10,
height: 11
});
crop = darth.getCrop();
assert.equal(crop.x, 8);
assert.equal(crop.y, 9);
assert.equal(crop.width, 10);
assert.equal(crop.height, 11);
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.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.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.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.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.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.setCropHeight(15);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 14);
assert.equal(crop.height, 15);
darth.setCropHeight(15);
crop = darth.getCrop();
assert.equal(crop.x, 12);
assert.equal(crop.y, 13);
assert.equal(crop.width, 14);
assert.equal(crop.height, 15);
darth.setAttrs({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offsetX: 50,
offsetY: 30,
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
darth.setAttrs({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offsetX: 50,
offsetY: 30,
crop: { x: 135, y: 7, width: 167, height: 134 },
draggable: true
});
//document.body.appendChild(layer.bufferCanvas.element)
//document.body.appendChild(layer.bufferCanvas.element)
assert.equal(darth.getClassName(), 'Image');
assert.equal(darth.getClassName(), 'Image');
var trace = layer.getContext().getTrace();
//console.log(trace);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();');
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();'
);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop and scale image', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
darth = new Konva.Image({
x: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: {x:186, y:211, width:106, height:74},
draggable: true,
scale: [0.5, 0.5]
});
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
darth = new Konva.Image({
x: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: { x: 186, y: 211, width: 106, height: 74 },
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
stage.add(layer);
layer.add(darth);
stage.add(layer);
assert.equal(darth.getCrop().x, 186);
assert.equal(darth.getCrop().y, 211);
assert.equal(darth.getCrop().width, 106);
assert.equal(darth.getCrop().height, 74);
assert.equal(darth.getCrop().x, 186);
assert.equal(darth.getCrop().y, 211);
assert.equal(darth.getCrop().width, 106);
assert.equal(darth.getCrop().height, 74);
assert.equal(darth.getCropX(), 186);
assert.equal(darth.getCropY(), 211);
assert.equal(darth.getCropWidth(), 106);
assert.equal(darth.getCropHeight(), 74);
assert.equal(darth.getCropX(), 186);
assert.equal(darth.getCropY(), 211);
assert.equal(darth.getCropWidth(), 106);
assert.equal(darth.getCropHeight(), 74);
darth.setCrop({ x: 1, y: 2, width: 3, height: 4 });
darth.setCrop({x: 1, y: 2, width: 3, height: 4});
assert.equal(darth.getCrop().x, 1);
assert.equal(darth.getCrop().y, 2);
assert.equal(darth.getCrop().width, 3);
assert.equal(darth.getCrop().height, 4);
assert.equal(darth.getCrop().x, 1);
assert.equal(darth.getCrop().y, 2);
assert.equal(darth.getCrop().width, 3);
assert.equal(darth.getCrop().height, 4);
assert.equal(darth.getCropX(), 1);
assert.equal(darth.getCropY(), 2);
assert.equal(darth.getCropWidth(), 3);
assert.equal(darth.getCropHeight(), 4);
assert.equal(darth.getCropX(), 1);
assert.equal(darth.getCropY(), 2);
assert.equal(darth.getCropWidth(), 3);
assert.equal(darth.getCropHeight(), 4);
darth.setCropX(5);
darth.setCropY(6);
darth.setCropWidth(7);
darth.setCropHeight(8);
darth.setCropX(5);
darth.setCropY(6);
darth.setCropWidth(7);
darth.setCropHeight(8);
assert.equal(darth.getCrop().x, 5);
assert.equal(darth.getCrop().y, 6);
assert.equal(darth.getCrop().width, 7);
assert.equal(darth.getCrop().height, 8);
assert.equal(darth.getCrop().x, 5);
assert.equal(darth.getCrop().y, 6);
assert.equal(darth.getCrop().width, 7);
assert.equal(darth.getCrop().height, 8);
assert.equal(darth.getCropX(), 5);
assert.equal(darth.getCropY(), 6);
assert.equal(darth.getCropWidth(), 7);
assert.equal(darth.getCropHeight(), 8);
assert.equal(darth.getCropX(), 5);
assert.equal(darth.getCropY(), 6);
assert.equal(darth.getCropWidth(), 7);
assert.equal(darth.getCropHeight(), 8);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test.skip('image with svg source', function(done) {
var imageObj = new Image();
var imageObj = new Image();
var stage = addStage();
var layer = new Konva.Layer();
var stage = addStage();
var layer = new Konva.Layer();
imageObj.onload = function() {
imageObj.onload = function() {
var tiger = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
scale: 0.25
});
var tiger = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
scale: 0.25
});
layer.add(tiger);
stage.add(layer);
layer.add(tiger);
stage.add(layer);
done();
};
imageObj.src = 'assets/Ghostscript_Tiger.svg';
done();
};
imageObj.src = 'assets/Ghostscript_Tiger.svg';
});
// ======================================================
test.skip('opacity test for image with svg source', function(done) {
var imageObj = new Image();
var imageObj = new Image();
var stage = addStage();
var layer = new Konva.Layer();
var stage = addStage();
var layer = new Konva.Layer();
layer.add(new Konva.Line({
points: [0,0,578,200],
stroke: 'black',
layer.add(
new Konva.Line({
points: [0, 0, 578, 200],
stroke: 'black',
strokeWidth: 5
})
);
imageObj.onload = function() {
var tiger = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
scale: 0.25,
opacity: 0.5
});
layer.add(tiger);
layer.add(
new Konva.Line({
points: [578, 0, 0, 200],
stroke: 'blue',
strokeWidth: 5
}));
})
);
imageObj.onload = function() {
var tiger = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
scale: 0.25,
opacity: 0.5
});
layer.add(tiger);
layer.add(new Konva.Line({
points: [578,0,0,200],
stroke: 'blue',
strokeWidth: 5
}));
stage.add(layer);
done();
};
imageObj.style.opacity = 0.5;
imageObj.src = 'assets/Ghostscript_Tiger.svg';
stage.add(layer);
done();
};
imageObj.style.opacity = 0.5;
imageObj.src = 'assets/Ghostscript_Tiger.svg';
});
// ======================================================
test('image with opacity and shadow', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y:30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.1,
shadowOffset: {x: 20, y:20}
});
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: { x: 50, y: 30 },
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.1,
shadowOffset: { x: 20, y: 20 }
});
layer.add(darth);
stage.add(layer);
layer.add(darth);
stage.add(layer);
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.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();');
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.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();'
);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('image with stroke, opacity and shadow', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y: 30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: {x:20, y:20},
stroke: 'red',
strokeWidth: 20
});
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: { x: 50, y: 30 },
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: { x: 20, y: 20 },
stroke: 'red',
strokeWidth: 20
});
layer.add(darth);
stage.add(layer);
layer.add(darth);
stage.add(layer);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();restore();');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();restore();'
);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('image caching', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
draggable: true
});
darth.cache();
layer.add(darth);
stage.add(layer);
assert.deepEqual(darth.getSelfRect(), {
x : 0, y : 0, width : 100, height : 100
});
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.drawImage(imageObj, 200, 60, 100, 100);
compareLayerAndCanvas(layer, canvas, 10);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
test('image loader', function(done) {
// ======================================================
test('image caching', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var src = 'assets/darth-vader.jpg';
Konva.Image.fromURL(src, function(image) {
layer.add(image);
layer.draw();
assert.equal(image instanceof Konva.Image, true);
var nativeImg = image.image();
assert.equal(nativeImg instanceof Image, true);
assert.equal(nativeImg.src.indexOf(src) !== -1, true);
assert.equal(nativeImg.complete, true);
done();
var darth = new Konva.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
draggable: true
});
darth.cache();
layer.add(darth);
stage.add(layer);
assert.deepEqual(darth.getSelfRect(), {
x: 0,
y: 0,
width: 100,
height: 100
});
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.drawImage(imageObj, 200, 60, 100, 100);
compareLayerAndCanvas(layer, canvas, 10);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
test('image loader', function(done) {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var src = 'assets/darth-vader.jpg';
Konva.Image.fromURL(src, function(image) {
layer.add(image);
layer.draw();
assert.equal(image instanceof Konva.Image, true);
var nativeImg = image.image();
assert.equal(nativeImg instanceof Image, true);
assert.equal(nativeImg.src.indexOf(src) !== -1, true);
assert.equal(nativeImg.complete, true);
done();
});
});
});

472
test/unit/shapes/Label-test.js
View File

@@ -1,246 +1,270 @@
suite('Label', function() {
// ======================================================
test('add label', function() {
var stage = addStage();
var layer = new Konva.Layer();
var label = new Konva.Label({
x: 100,
y: 100,
draggable: true
});
// add a tag to the label
label.add(new Konva.Tag({
fill: '#bbb',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
lineJoin: 'round',
pointerDirection: 'up',
pointerWidth: 20,
pointerHeight: 20,
cornerRadius: 5
}));
// add text to the label
label.add(new Konva.Text({
text: '',
fontSize: 50,
//fontFamily: 'Calibri',
//fontStyle: 'normal',
lineHeight: 1.2,
//padding: 10,
fill: 'green'
}));
layer.add(label);
stage.add(layer);
label.getText().setFontSize(100);
label.getText().setFontSize(50);
label.getText().setText('Hello big world');
layer.draw();
assert.equal(label.getType(), 'Group');
assert.equal(label.getClassName(), 'Label');
// use relaxed trace because text can be a slightly different size in different browsers,
// resulting in slightly different tag dimensions
var relaxedTrace = layer.getContext().getTrace(true);
// console.log(relaxedTrace);
// assert.equal(relaxedTrace, 'clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();');
// ======================================================
test('add label', function() {
var stage = addStage();
var layer = new Konva.Layer();
var label = new Konva.Label({
x: 100,
y: 100,
draggable: true
});
// ======================================================
test('create label from json', function() {
var stage = addStage();
// add a tag to the label
label.add(
new Konva.Tag({
fill: '#bbb',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
lineJoin: 'round',
pointerDirection: 'up',
pointerWidth: 20,
pointerHeight: 20,
cornerRadius: 5
})
);
var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
var layer = new Konva.Layer();
// add text to the label
label.add(
new Konva.Text({
text: '',
fontSize: 50,
//fontFamily: 'Calibri',
//fontStyle: 'normal',
lineHeight: 1.2,
//padding: 10,
fill: 'green'
})
);
var label = Konva.Node.create(json);
layer.add(label);
stage.add(layer);
layer.add(label);
stage.add(layer);
label.getText().setFontSize(100);
label.getText().setFontSize(50);
label.getText().setText('Hello big world');
layer.draw();
assert.equal(label.getType(), 'Group');
assert.equal(label.getClassName(), 'Label');
// use relaxed trace because text can be a slightly different size in different browsers,
// resulting in slightly different tag dimensions
var relaxedTrace = layer.getContext().getTrace(true);
// console.log(relaxedTrace);
// assert.equal(relaxedTrace, 'clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();');
});
// ======================================================
test('create label from json', function() {
var stage = addStage();
var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
var layer = new Konva.Layer();
var label = Konva.Node.create(json);
layer.add(label);
stage.add(layer);
});
test('find label class', function() {
var stage = addStage();
var layer = new Konva.Layer();
var label = new Konva.Label({
x: 100,
y: 100
});
test('find label class', function() {
var stage = addStage();
var layer = new Konva.Layer();
// add a tag to the label
label.add(
new Konva.Tag({
fill: '#bbb'
})
);
var label = new Konva.Label({
x: 100,
y: 100
});
// add text to the label
label.add(
new Konva.Text({
text: 'Test Label',
fill: 'green'
})
);
// add a tag to the label
label.add(new Konva.Tag({
fill: '#bbb'
}));
layer.add(label);
stage.add(layer);
// add text to the label
label.add(new Konva.Text({
text: 'Test Label',
fill: 'green'
}));
assert.equal(stage.find('Label')[0], label);
});
layer.add(label);
stage.add(layer);
test.skip('cache label', function() {
var stage = addStage();
var layer = new Konva.Layer();
assert.equal(stage.find('Label')[0], label);
// tooltip
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltip.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
})
);
tooltip.add(
new Konva.Text({
text: 'Tooltip pointing down',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
})
);
var tooltipUp = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltipUp.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'up',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
})
);
tooltipUp.add(
new Konva.Text({
text: 'Tooltip pointing up',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
})
);
// label with left pointer
var labelLeft = new Konva.Label({
x: 20,
y: 130,
opacity: 0.75
});
labelLeft.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'left',
pointerWidth: 30,
pointerHeight: 28,
lineJoin: 'round'
})
);
labelLeft.add(
new Konva.Text({
text: 'Label pointing left',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
})
);
// label with left pointer
var labelRight = new Konva.Label({
x: 160,
y: 170,
offsetX: 20,
opacity: 0.75
});
labelRight.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'right',
pointerWidth: 20,
pointerHeight: 28,
lineJoin: 'round'
})
);
labelRight.add(
new Konva.Text({
text: 'Label right',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
})
);
// simple label
var simpleLabel = new Konva.Label({
x: 180,
y: 150,
opacity: 0.75
});
simpleLabel.add(
new Konva.Tag({
fill: 'yellow'
})
);
simpleLabel.add(
new Konva.Text({
text: 'Simple label',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'black'
})
);
// add the labels to layer
layer.add(tooltip, tooltipUp, labelLeft, labelRight, simpleLabel);
layer.children.cache();
stage.add(layer);
cloneAndCompareLayer(layer, 254);
});
it('tag should list text size changes', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var label = new Konva.Label();
var tag = new Konva.Tag({
stroke: 'black'
});
test.skip('cache label', function() {
var stage = addStage();
var layer = new Konva.Layer();
label.add(tag);
// tooltip
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltip.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltip.add(new Konva.Text({
text: 'Tooltip pointing down',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
var tooltipUp = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltipUp.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'up',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltipUp.add(new Konva.Text({
text: 'Tooltip pointing up',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// label with left pointer
var labelLeft = new Konva.Label({
x: 20,
y: 130,
opacity: 0.75
});
labelLeft.add(new Konva.Tag({
fill: 'green',
pointerDirection: 'left',
pointerWidth: 30,
pointerHeight: 28,
lineJoin: 'round'
}));
labelLeft.add(new Konva.Text({
text: 'Label pointing left',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// label with left pointer
var labelRight = new Konva.Label({
x: 160,
y: 170,
offsetX : 20,
opacity: 0.75
});
labelRight.add(new Konva.Tag({
fill: 'green',
pointerDirection: 'right',
pointerWidth: 20,
pointerHeight: 28,
lineJoin: 'round'
}));
labelRight.add(new Konva.Text({
text: 'Label right',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// simple label
var simpleLabel = new Konva.Label({
x: 180,
y: 150,
opacity: 0.75
});
simpleLabel.add(new Konva.Tag({
fill: 'yellow'
}));
simpleLabel.add(new Konva.Text({
text: 'Simple label',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'black'
}));
// add the labels to layer
layer.add(tooltip, tooltipUp, labelLeft, labelRight, simpleLabel);
layer.children.cache();
stage.add(layer);
cloneAndCompareLayer(layer, 254);
var text = new Konva.Text({
text: 'hello hello hello hello hello hello hello hello'
});
label.add(text);
it('tag should list text size changes', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
layer.add(label);
layer.draw();
var label = new Konva.Label();
text.width(200);
var tag = new Konva.Tag({
stroke: 'black'
});
label.add(tag);
var text = new Konva.Text({
text: 'hello hello hello hello hello hello hello hello'
});
label.add(text);
layer.add(label);
layer.draw();
text.width(200);
layer.draw();
assert.equal(tag.width(), text.width());
});
layer.draw();
assert.equal(tag.width(), text.width());
});
});

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

@@ -1,75 +1,74 @@
suite('Line', function () {
// ======================================================
test('add line', function () {
var stage = addStage();
var layer = new Konva.Layer();
suite('Line', function() {
// ======================================================
test('add line', function() {
var stage = addStage();
var layer = new Konva.Layer();
var line = new Konva.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 0
});
layer.add(line);
stage.add(layer);
line.setPoints([1, 2, 3, 4]);
assert.equal(line.getPoints()[0], 1);
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], 73);
assert.equal(line.getClassName(), 'Line');
layer.draw();
showHit(layer);
var line = new Konva.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 0
});
// ======================================================
test('test default ponts array for two lines', function () {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(line);
stage.add(layer);
var line = new Konva.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
line.setPoints([1, 2, 3, 4]);
assert.equal(line.getPoints()[0], 1);
var redLine = new Konva.Line({
x: 50,
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
line.setPoints([5, 6, 7, 8]);
assert.equal(line.getPoints()[0], 5);
line.setPoints([0, 1, 2, 3]);
redLine.setPoints([4, 5, 6, 7]);
line.setPoints([73, 160, 340, 23, 340, 80]);
assert.equal(line.getPoints()[0], 73);
layer.add(line).add(redLine);
stage.add(layer);
assert.equal(line.getClassName(), 'Line');
assert.equal(line.getPoints()[0], 0);
assert.equal(redLine.getPoints()[0], 4);
layer.draw();
showHit(layer);
});
// ======================================================
test('test default ponts array for two lines', function() {
var stage = addStage();
var layer = new Konva.Layer();
var line = new Konva.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
// ======================================================
test('add dashed line', function () {
var stage = addStage();
var layer = new Konva.Layer();
var redLine = new Konva.Line({
x: 50,
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
/*
line.setPoints([0, 1, 2, 3]);
redLine.setPoints([4, 5, 6, 7]);
layer.add(line).add(redLine);
stage.add(layer);
assert.equal(line.getPoints()[0], 0);
assert.equal(redLine.getPoints()[0], 4);
});
// ======================================================
test('add dashed line', function() {
var stage = addStage();
var layer = new Konva.Layer();
/*
var points = [{
x: 73,
y: 160
@@ -85,228 +84,229 @@ suite('Line', function () {
}];
*/
var line = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
dash: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: {
x: 20,
y: 20
}
//opacity: 0.2
});
layer.add(line);
stage.add(layer);
assert.equal(line.dash().length, 6);
line.dash([10, 10]);
assert.equal(line.dash().length, 2);
assert.equal(line.getPoints().length, 8);
var line = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
dash: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: {
x: 20,
y: 20
}
//opacity: 0.2
});
// ======================================================
test('add line with shadow', function () {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(line);
stage.add(layer);
var line = new Konva.Line({
points: [73, 160, 340, 23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 20,
shadowOffset: {
x: 10,
y: 10
},
shadowOpacity: 0.5,
draggable: true
});
assert.equal(line.dash().length, 6);
line.dash([10, 10]);
assert.equal(line.dash().length, 2);
layer.add(line);
stage.add(layer);
assert.equal(line.getPoints().length, 8);
});
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.save();
context.lineJoin = 'round';
context.lineCap = 'round';
context.lineWidth = 20;
context.strokeStyle = 'blue';
context.shadowColor = 'rgba(0,0,0,0.5)';
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.moveTo(73, 160);
context.lineTo(340, 23);
context.stroke();
context.fill();
context.restore();
compareLayerAndCanvas(layer, canvas, 5);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();');
// ======================================================
test('add line with shadow', function() {
var stage = addStage();
var layer = new Konva.Layer();
var line = new Konva.Line({
points: [73, 160, 340, 23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 20,
shadowOffset: {
x: 10,
y: 10
},
shadowOpacity: 0.5,
draggable: true
});
test('line hit test with strokeScaleEnabled = false', function () {
var stage = addStage();
var scale = 0.1;
var layer = new Konva.Layer();
layer.add(line);
stage.add(layer);
var group = new Konva.Group({
scale: {
x: scale,
y: scale
}
});
var canvas = createCanvas();
var context = canvas.getContext('2d');
var line1 = new Konva.Line({
points: [0, 0, 300, 0],
stroke: 'red',
strokeScaleEnabled: false,
strokeWidth: 10,
y: 0
});
group.add(line1);
context.save();
context.lineJoin = 'round';
context.lineCap = 'round';
context.lineWidth = 20;
context.strokeStyle = 'blue';
var line2 = new Konva.Line({
points: [0, 0, 300, 0],
stroke: 'green',
strokeWidth: 40 / scale,
y: 60 / scale
});
group.add(line2);
context.shadowColor = 'rgba(0,0,0,0.5)';
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.moveTo(73, 160);
context.lineTo(340, 23);
layer.add(group);
stage.add(layer);
showHit(layer);
context.stroke();
context.fill();
context.restore();
var shape = layer.getIntersection({
x: 10,
y: 60
});
assert.equal(shape, line2, 'second line detected');
compareLayerAndCanvas(layer, canvas, 5);
shape = layer.getIntersection({
x: 10,
y: 4
});
assert.equal(shape, line1, 'first line detected');
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();'
);
});
test('line hit test with strokeScaleEnabled = false', function() {
var stage = addStage();
var scale = 0.1;
var layer = new Konva.Layer();
var group = new Konva.Group({
scale: {
x: scale,
y: scale
}
});
test('line get size', function () {
var stage = addStage();
var layer = new Konva.Layer();
var line1 = new Konva.Line({
points: [0, 0, 300, 0],
stroke: 'red',
strokeScaleEnabled: false,
strokeWidth: 10,
y: 0
});
group.add(line1);
var line = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
var line2 = new Konva.Line({
points: [0, 0, 300, 0],
stroke: 'green',
strokeWidth: 40 / scale,
y: 60 / scale
});
group.add(line2);
strokeWidth: 10
});
layer.add(group);
stage.add(layer);
showHit(layer);
layer.add(line);
stage.add(layer);
var shape = layer.getIntersection({
x: 10,
y: 60
});
assert.equal(shape, line2, 'second line detected');
assert.deepEqual(line.size(), {
width: 500 - 73,
height: 180 - 23
});
shape = layer.getIntersection({
x: 10,
y: 4
});
assert.equal(shape, line1, 'first line detected');
});
test('line get size', function() {
var stage = addStage();
var layer = new Konva.Layer();
var line = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10
});
test('getSelfRect', function () {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
closed: true
});
layer.add(line);
stage.add(layer);
layer.add(blob);
stage.add(layer);
assert.deepEqual(line.size(), {
width: 500 - 73,
height: 180 - 23
});
});
assert.deepEqual(blob.getSelfRect(), {
x: -25,
y: -30,
width: 275,
height: 140
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf',
closed: true
});
test('getClientRect', function () {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(blob);
stage.add(layer);
var poly = new Konva.Line({
x: 0,
y: 0,
points: [-100, 0, +100, 0, +100, 100, -100, 100],
closed: true,
fill: '#0f0'
});
assert.deepEqual(blob.getSelfRect(), {
x: -25,
y: -30,
width: 275,
height: 140
});
});
stage.position({
x: 150,
y: 50
});
test('getClientRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
var rect = layer.getClientRect();
assert.deepEqual(rect, {
x: -100,
y: 0,
width: 200,
height: 100
});
var poly = new Konva.Line({
x: 0,
y: 0,
points: [-100, 0, +100, 0, +100, 100, -100, 100],
closed: true,
fill: '#0f0'
});
test('line caching', function () {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
closed: true
});
layer.add(blob);
var layer2 = layer.clone();
blob.cache({
offset: 30
});
stage.add(layer);
stage.add(layer2);
layer2.hide();
compareLayers(layer, layer2);
stage.position({
x: 150,
y: 50
});
layer.add(poly);
stage.add(layer);
var rect = layer.getClientRect();
assert.deepEqual(rect, {
x: -100,
y: 0,
width: 200,
height: 100
});
});
test('line caching', function() {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
closed: true
});
layer.add(blob);
var layer2 = layer.clone();
blob.cache({
offset: 30
});
stage.add(layer);
stage.add(layer2);
layer2.hide();
compareLayers(layer, layer2);
});
});

1795
test/unit/shapes/Path-test.js
View File

File diff suppressed because one or more lines are too long

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

@@ -1,21 +1,21 @@
suite('Polygon', function() {
test('add polygon', function() {
var stage = addStage();
test('add polygon', function() {
var stage = addStage();
var layer = new Konva.Layer();
var points = [73,192,73,160,340,23,500,109,499,139,342,93];
var poly = new Konva.Line({
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
closed: true
});
var layer = new Konva.Layer();
var points = [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93];
layer.add(poly);
stage.add(layer);
assert.equal(poly.getClassName(), 'Line');
var poly = new Konva.Line({
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
closed: true
});
});
layer.add(poly);
stage.add(layer);
assert.equal(poly.getClassName(), 'Line');
});
});

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

@@ -1,7 +1,6 @@
suite('Rect', function(){
suite('Rect', function() {
// ======================================================
test('add rect to stage', function(){
test('add rect to stage', function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -23,15 +22,21 @@ suite('Rect', function(){
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();');
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();'
);
var relaxedTrace = layer.getContext().getTrace(true);
//console.log(relaxedTrace);
assert.equal(relaxedTrace, 'clearRect();save();transform();beginPath();rect();closePath();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();');
assert.equal(
relaxedTrace,
'clearRect();save();transform();beginPath();rect();closePath();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();'
);
});
// ======================================================
test('add rect with shadow, corner radius, and opacity', function(){
test('add rect with shadow, corner radius, and opacity', function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -45,7 +50,7 @@ suite('Rect', function(){
stroke: 'blue',
shadowColor: 'red',
shadowBlur: 10,
shadowOffset: {x: 5, y: 5},
shadowOffset: { x: 5, y: 5 },
shadowOpacity: 0.5,
opacity: 0.4,
cornerRadius: 5
@@ -63,140 +68,137 @@ suite('Rect', function(){
assert.equal(rect.getCornerRadius(), 5);
});
// ======================================================
test('draw rect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 90,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: {
x: 2,
y: 2
},
cornerRadius: 15,
draggable: true
});
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 90,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: {
x: 2,
y: 2
},
cornerRadius: 15,
draggable: true
});
layer.add(rect);
stage.add(layer);
assert.equal(rect.getClassName(), 'Rect');
layer.add(rect);
stage.add(layer);
assert.equal(rect.getClassName(), 'Rect');
});
// ======================================================
test('add fill stroke rect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
stroke: 'green',
strokeWidth: 4
});
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
stroke: 'green',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();
compareLayerAndCanvas(layer, canvas);
compareLayerAndCanvas(layer, canvas);
});
// ======================================================
test('add stroke rect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'green',
strokeWidth: 4
});
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'green',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();
compareLayerAndCanvas(layer, canvas);
compareLayerAndCanvas(layer, canvas);
});
// ======================================================
test('use default stroke width (stroke width should be 2)', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'blue'
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();
compareLayerAndCanvas(layer, canvas);
});
// ======================================================
test('limit corner radius', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'black',
cornerRadius : 100
});
layer.add(rect);
stage.add(layer);
// as corner radius is much bigger we should have circe in the result
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2);
context.fillStyle = 'black';
context.fill();
compareLayerAndCanvas(layer, canvas, 100);
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'blue'
});
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(200, 100, 100, 50);
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();
compareLayerAndCanvas(layer, canvas);
});
// ======================================================
test('limit corner radius', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'black',
cornerRadius: 100
});
layer.add(rect);
stage.add(layer);
// as corner radius is much bigger we should have circe in the result
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2);
context.fillStyle = 'black';
context.fill();
compareLayerAndCanvas(layer, canvas, 100);
});
});

249
test/unit/shapes/RegularPolygon-test.js
View File

@@ -1,153 +1,150 @@
suite('RegularPolygon', function() {
// ======================================================
test('add regular polygon triangle', function() {
var stage = addStage();
// ======================================================
test('add regular polygon triangle', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 3,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -50
}
});
layer.add(poly);
stage.add(layer);
assert.equal(poly.getClassName(), 'RegularPolygon');
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 3,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -50
}
});
// ======================================================
test('add regular polygon square', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 4,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
assert.equal(poly.getClassName(), 'RegularPolygon');
});
layer.add(poly);
stage.add(layer);
// ======================================================
test('add regular polygon square', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 4,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('add regular polygon pentagon', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
});
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('add regular polygon pentagon', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('add regular polygon octogon', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
});
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 8,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('add regular polygon octogon', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 8,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
});
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
assert.equal(poly.getWidth(), 100);
assert.equal(poly.getHeight(), 100);
poly.setWidth(120);
assert.equal(poly.radius(), 60);
assert.equal(poly.getHeight(), 120);
poly.setHeight(140);
assert.equal(poly.radius(), 70);
assert.equal(poly.getHeight(), 140);
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
test('polygon cache', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
layer.add(poly);
stage.add(layer);
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 5,
name: 'foobar'
});
poly.cache();
layer.add(poly);
stage.add(layer);
assert.equal(poly.getWidth(), 100);
assert.equal(poly.getHeight(), 100);
assert.deepEqual(poly.getSelfRect(), {
x : -50,
y : -50,
height : 100,
width : 100
});
if (!window.isPhantomJS) {
cloneAndCompareLayer(layer, 254);
}
Konva.pixelRatio = undefined;
poly.setWidth(120);
assert.equal(poly.radius(), 60);
assert.equal(poly.getHeight(), 120);
poly.setHeight(140);
assert.equal(poly.radius(), 70);
assert.equal(poly.getHeight(), 140);
});
test('polygon cache', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 5,
name: 'foobar'
});
poly.cache();
layer.add(poly);
stage.add(layer);
assert.deepEqual(poly.getSelfRect(), {
x: -50,
y: -50,
height: 100,
width: 100
});
if (!window.isPhantomJS) {
cloneAndCompareLayer(layer, 254);
}
Konva.pixelRatio = undefined;
});
});

151
test/unit/shapes/Ring-test.js
View File

@@ -1,89 +1,88 @@
suite('Ring', function() {
// ======================================================
test('add ring', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
innerRadius: 50,
outerRadius: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(ring);
stage.add(layer);
assert.equal(ring.getClassName(), 'Ring');
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
innerRadius: 50,
outerRadius: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(ring);
stage.add(layer);
assert.equal(ring.getClassName(), 'Ring');
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,50,0,6.283,false);moveTo(90,0);arc(0,0,90,6.283,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
});
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,50,0,6.283,false);moveTo(90,0);arc(0,0,90,6.283,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================
test('ring attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
name: 'ring',
x: 30,
y: 50,
innerRadius: 15,
outerRadius: 30,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(ring);
stage.add(layer);
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
name: 'ring',
x: 30,
y: 50,
innerRadius: 15,
outerRadius: 30,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(ring);
stage.add(layer);
assert(ring.width(),60);
assert(ring.height(), 60);
assert(ring.width(), 60);
assert(ring.height(), 60);
ring.height(100);
assert(ring.width(), 100);
assert(ring.outerRadius(), 50);
ring.width(120);
assert(ring.height(), 120);
assert(ring.outerRadius(), 60);
});
test('ring cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
name: 'ring',
x: 30,
y: 50,
innerRadius: 15,
outerRadius: 30,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(ring);
stage.add(layer);
assert.deepEqual(ring.getSelfRect(), {
x : -30,
y : -30,
width : 60,
height : 60
});
var layer2 = layer.clone();
stage.add(layer2);
layer2.hide();
compareLayers(layer, layer2);
ring.height(100);
assert(ring.width(), 100);
assert(ring.outerRadius(), 50);
ring.width(120);
assert(ring.height(), 120);
assert(ring.outerRadius(), 60);
});
test('ring cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var ring = new Konva.Ring({
name: 'ring',
x: 30,
y: 50,
innerRadius: 15,
outerRadius: 30,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
});
layer.add(ring);
stage.add(layer);
assert.deepEqual(ring.getSelfRect(), {
x: -30,
y: -30,
width: 60,
height: 60
});
var layer2 = layer.clone();
stage.add(layer2);
layer2.hide();
compareLayers(layer, layer2);
});
});

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

@@ -1,110 +1,109 @@
suite('Spline', function() {
// ======================================================
test('add splines', function() {
var stage = addStage();
var layer = new Konva.Layer();
// ======================================================
test('add splines', function() {
var stage = addStage();
var layer = new Konva.Layer();
var line1 = new Konva.Line({
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
var line2 = new Konva.Line({
points: [73,160,340,23,500,109],
stroke: 'red',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
var line3 = new Konva.Line({
points: [73,160,340,23],
stroke: 'green',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line1);
layer.add(line2);
layer.add(line3);
stage.add(layer);
assert.equal(line1.getClassName(), 'Line');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();');
var line1 = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 300, 109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
// ======================================================
test('update spline points', function() {
var stage = addStage();
var layer = new Konva.Layer();
var spline = new Konva.Line({
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
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);
layer.draw();
var line2 = new Konva.Line({
points: [73, 160, 340, 23, 500, 109],
stroke: 'red',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
// ======================================================
test('add point to spline points', function() {
var stage = addStage();
var layer = new Konva.Layer();
var spline = new Konva.Line({
points: [73,160,340,23,500,109,300,109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
assert.equal(spline.getPoints().length, 8);
var points = spline.getPoints();
points.push(300);
points.push(200);
spline.clearCache();
assert.equal(spline.getPoints().length, 10);
layer.draw();
var line3 = new Konva.Line({
points: [73, 160, 340, 23],
stroke: 'green',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
});
layer.add(line1);
layer.add(line2);
layer.add(line3);
stage.add(layer);
assert.equal(line1.getClassName(), 'Line');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();'
);
});
// ======================================================
test('update spline points', function() {
var stage = addStage();
var layer = new Konva.Layer();
var spline = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 300, 109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
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);
layer.draw();
});
// ======================================================
test('add point to spline points', function() {
var stage = addStage();
var layer = new Konva.Layer();
var spline = new Konva.Line({
points: [73, 160, 340, 23, 500, 109, 300, 109],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
assert.equal(spline.getPoints().length, 8);
var points = spline.getPoints();
points.push(300);
points.push(200);
spline.clearCache();
assert.equal(spline.getPoints().length, 10);
layer.draw();
});
});

659
test/unit/shapes/Sprite-test.js
View File

@@ -1,293 +1,424 @@
suite('Sprite', function() {
// ======================================================
test('add sprite', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
// ======================================================
test('add sprite', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
],
kicking: [
0,
109,
45,
98,
45,
109,
45,
98,
95,
109,
63,
98,
156,
109,
70,
98,
229,
109,
60,
98,
287,
109,
41,
98
]
},
frameRate: 10,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: { x: 3, y: 1 },
shadowOpacity: 0.3
});
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
],
kicking: [
0, 109, 45, 98,
45, 109, 45, 98,
95, 109, 63, 98,
156, 109, 70, 98,
229, 109, 60, 98,
287, 109, 41, 98
]
},
frameRate: 10,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: {x: 3, y:1},
shadowOpacity: 0.3
});
layer.add(sprite);
stage.add(layer);
layer.add(sprite);
stage.add(layer);
assert.equal(sprite.getClassName(), 'Sprite');
assert.equal(sprite.frameIndex(), 0);
assert.equal(sprite.getClassName(), 'Sprite');
assert.equal(sprite.frameIndex(), 0);
showHit(layer);
showHit(layer);
var trace = layer.hitCanvas.getContext().getTrace();
var trace = layer.hitCanvas.getContext().getTrace();
assert.equal(trace.indexOf(sprite.colorKey) >= 0, true);
assert.equal(trace.indexOf(sprite.colorKey) >= 0, true);
sprite.start();
sprite.start();
// kick once
setTimeout(
function() {
sprite.setAnimation('kicking');
sprite.on('indexChange', function(evt) {
if (evt.newVal === 0 && this.getAnimation() === 'kicking') {
sprite.setAnimation('standing');
}
});
},
2000
);
setTimeout(
function() {
sprite.stop();
},
3000
);
done();
};
imageObj.src = 'assets/scorpion-sprite.png';
});
// kick once
setTimeout(function() {
sprite.setAnimation('kicking');
sprite.on('indexChange', function(evt) {
if (evt.newVal === 0 && this.getAnimation() === 'kicking') {
sprite.setAnimation('standing');
}
});
}, 2000);
setTimeout(function() {
sprite.stop();
}, 3000);
// ======================================================
test('don`t update layer too many times', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
]
},
frameRate: 5,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: { x: 3, y: 1 },
shadowOpacity: 0.3
});
layer.add(sprite);
stage.add(layer);
done();
};
imageObj.src = 'assets/scorpion-sprite.png';
});
var oldDraw = layer.draw;
var updateCount = 0;
layer.draw = function() {
updateCount++;
oldDraw.call(layer);
};
// ======================================================
test('don`t update layer too many times', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
sprite.start();
setTimeout(
function() {
sprite.stop();
assert.equal(updateCount < 7, true);
done();
},
1000
);
};
imageObj.src = 'assets/scorpion-sprite.png';
});
// ======================================================
test('don`t update layer too many times 2', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
},
frameRate: 5,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: {x: 3, y:1},
shadowOpacity: 0.3
});
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
]
},
frameRate: 5
});
layer.add(sprite);
stage.add(layer);
var sprite2 = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
]
},
frameRate: 20
});
var oldDraw = layer.draw;
var updateCount = 0;
layer.draw = function() {
updateCount++;
oldDraw.call(layer);
};
layer.add(sprite).add(sprite2);
stage.add(layer);
sprite.start();
setTimeout(function() {
sprite.stop();
assert.equal(updateCount < 7, true);
done();
}, 1000);
var oldDraw = layer.draw;
var updateCount = 0;
layer.draw = function() {
updateCount++;
oldDraw.call(layer);
};
sprite.start();
sprite2.start();
setTimeout(
function() {
sprite.stop();
sprite2.stop();
assert.equal(updateCount > 15, true);
assert.equal(updateCount < 27, true);
done();
},
1000
);
};
imageObj.src = 'assets/scorpion-sprite.png';
});
};
imageObj.src = 'assets/scorpion-sprite.png';
});
test('check is sprite running', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
// ======================================================
test('don`t update layer too many times 2', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
]
},
frameRate: 50,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: { x: 3, y: 1 },
shadowOpacity: 0.3
});
layer.add(sprite);
stage.add(layer);
assert.equal(sprite.isRunning(), false);
sprite.start();
assert.equal(sprite.isRunning(), true);
sprite.stop();
done();
};
imageObj.src = 'assets/scorpion-sprite.png';
});
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
},
frameRate: 5
});
test.skip('can change frame rate on fly', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite2 = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
},
frameRate: 20
});
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0,
0,
49,
109,
52,
0,
49,
109,
105,
0,
49,
109,
158,
0,
49,
109,
210,
0,
49,
109,
262,
0,
49,
109
]
},
frameRate: 50,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: { x: 3, y: 1 },
shadowOpacity: 0.3
});
layer.add(sprite).add(sprite2);
stage.add(layer);
layer.add(sprite);
stage.add(layer);
assert.equal(sprite.frameRate(), 50);
setTimeout(
function() {
sprite.frameRate(100);
assert.equal(sprite.frameRate(), 100);
// don't run animation after change frame rate
assert.equal(sprite.anim.isRunning(), false);
var oldDraw = layer.draw;
var updateCount = 0;
layer.draw = function() {
updateCount++;
oldDraw.call(layer);
};
sprite.start();
},
23
);
sprite.start();
sprite2.start();
setTimeout(function() {
sprite.stop();
sprite2.stop();
assert.equal(updateCount > 15, true);
assert.equal(updateCount < 27, true);
done();
}, 1000);
};
imageObj.src = 'assets/scorpion-sprite.png';
});
test('check is sprite running', function(done){
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
},
frameRate: 50,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: {x: 3, y:1},
shadowOpacity: 0.3
});
layer.add(sprite);
stage.add(layer);
assert.equal(sprite.isRunning(), false);
sprite.start();
assert.equal(sprite.isRunning(), true);
sprite.stop();
done();
};
imageObj.src = 'assets/scorpion-sprite.png';
});
test.skip('can change frame rate on fly', function(done){
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var sprite = new Konva.Sprite({
x: 200,
y: 50,
image: imageObj,
animation: 'standing',
animations: {
standing: [
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
},
frameRate: 50,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: {x: 3, y:1},
shadowOpacity: 0.3
});
layer.add(sprite);
stage.add(layer);
assert.equal(sprite.frameRate(), 50);
setTimeout(function(){
sprite.frameRate(100);
assert.equal(sprite.frameRate(), 100);
// don't run animation after change frame rate
assert.equal(sprite.anim.isRunning(), false);
sprite.start();
}, 23);
setTimeout(function(){
sprite.frameRate(52);
assert.equal(sprite.anim.isRunning(), true);
// for this moment should tick more than 2 times
// make sure that sprite is not restating after set frame rate
assert.equal(sprite.frameIndex() > 2, true);
done();
}, 68);
};
imageObj.src = 'assets/scorpion-sprite.png';
});
});
setTimeout(
function() {
sprite.frameRate(52);
assert.equal(sprite.anim.isRunning(), true);
// for this moment should tick more than 2 times
// make sure that sprite is not restating after set frame rate
assert.equal(sprite.frameIndex() > 2, true);
done();
},
68
);
};
imageObj.src = 'assets/scorpion-sprite.png';
});
});

264
test/unit/shapes/Star-test.js
View File

@@ -1,148 +1,148 @@
suite('Star', function() {
// ======================================================
test('add five point star', function() {
var stage = addStage();
// ======================================================
test('add five point star', function() {
var stage = addStage();
var layer = new Konva.Layer();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -70
},
scale: {
x: 0.5,
y: 0.5
}
});
layer.add(star);
stage.add(layer);
assert.equal(star.getClassName(), 'Star');
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -70
},
scale: {
x: 0.5,
y: 0.5
}
});
// ======================================================
test('add star with line join and shadow', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(star);
stage.add(layer);
var rect = new Konva.Rect({
x: 250,
y: 75,
width: 100,
height: 100,
fill: 'red'
});
assert.equal(star.getClassName(), 'Star');
});
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
// ======================================================
test('add star with line join and shadow', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(rect);
layer.add(star);
stage.add(layer);
assert.equal(star.getLineJoin(), 'round');
star.setLineJoin('bevel');
assert.equal(star.getLineJoin(), 'bevel');
star.setLineJoin('round');
var rect = new Konva.Rect({
x: 250,
y: 75,
width: 100,
height: 100,
fill: 'red'
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
layer.add(star);
stage.add(layer);
assert.equal(star.getWidth(), 100);
assert.equal(star.getHeight(), 100);
star.setWidth(120);
assert.equal(star.outerRadius(), 60);
assert.equal(star.getHeight(), 120);
star.setHeight(140);
assert.equal(star.outerRadius(), 70);
assert.equal(star.getHeight(), 140);
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
// ======================================================
test('star cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(rect);
layer.add(star);
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
stage.add(layer);
layer.add(star);
star.cache();
stage.add(layer);
assert.equal(star.getLineJoin(), 'round');
star.setLineJoin('bevel');
assert.equal(star.getLineJoin(), 'bevel');
assert.deepEqual(star.getSelfRect(), {
x : -50,
y : -50,
height : 100,
width : 100
});
cloneAndCompareLayer(layer, 50);
star.setLineJoin('round');
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
});
layer.add(star);
stage.add(layer);
assert.equal(star.getWidth(), 100);
assert.equal(star.getHeight(), 100);
star.setWidth(120);
assert.equal(star.outerRadius(), 60);
assert.equal(star.getHeight(), 120);
star.setHeight(140);
assert.equal(star.outerRadius(), 70);
assert.equal(star.getHeight(), 140);
});
// ======================================================
test('star cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
layer.add(star);
star.cache();
stage.add(layer);
assert.deepEqual(star.getSelfRect(), {
x: -50,
y: -50,
height: 100,
width: 100
});
cloneAndCompareLayer(layer, 50);
});
});

632
test/unit/shapes/TextPath-test.js
View File

File diff suppressed because one or more lines are too long

138
test/unit/shapes/Wedge-test.js
View File

@@ -1,80 +1,82 @@
suite('Wedge', function() {
// ======================================================
test('add wedge', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: 100,
y: 100,
radius: 70,
angle: 180 * 0.4,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(wedge);
stage.add(layer);
assert.equal(wedge.getClassName(), 'Wedge');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
// ======================================================
test('add wedge', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: 100,
y: 100,
radius: 70,
angle: 180 * 0.4,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
angle: 180 * 0.4,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(wedge);
stage.add(layer);
layer.add(wedge);
stage.add(layer);
assert.equal(wedge.getClassName(), 'Wedge');
assert.equal(wedge.getWidth(), 140);
assert.equal(wedge.getHeight(), 140);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
wedge.setWidth(100);
assert.equal(wedge.radius(), 50);
assert.equal(wedge.getHeight(), 100);
wedge.setHeight(120);
assert.equal(wedge.radius(), 60);
assert.equal(wedge.getHeight(), 120);
test('attrs sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
angle: 180 * 0.4,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
angle: 180 * 0.4,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(wedge);
stage.add(layer);
layer.add(wedge);
stage.add(layer);
assert.equal(wedge.getWidth(), 140);
assert.equal(wedge.getHeight(), 140);
assert.deepEqual(wedge.getSelfRect(), {
x : -70,
y : -70,
width : 140,
height : 140
});
wedge.setWidth(100);
assert.equal(wedge.radius(), 50);
assert.equal(wedge.getHeight(), 100);
wedge.setHeight(120);
assert.equal(wedge.radius(), 60);
assert.equal(wedge.getHeight(), 120);
});
test('getSelfRect', function() {
var stage = addStage();
var layer = new Konva.Layer();
var wedge = new Konva.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
angle: 180 * 0.4,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
});
layer.add(wedge);
stage.add(layer);
assert.deepEqual(wedge.getSelfRect(), {
x: -70,
y: -70,
width: 140,
height: 140
});
});
});