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

finished migrating all unit tests over to Mocha

Browse Source
This commit is contained in:
Eric Rowell
2013-09-11 12:02:03 -07:00
parent 029348ec54
commit a9496339d1
40 changed files with 1916 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
tests/js/Test.js
View File

@@ -1,147 +0,0 @@
var numTests = 0;
var testCounter = null;
var before, after;
function startTimer() {
var date = new Date();
before = date.getTime();
}
function endTimer(str) {
var date = new Date();
after = date.getTime();
var diff = after - before;
console.log(str + ': ' + diff + 'ms');
}
function test(condition, message, warn) {
if(!condition) {
testCounter.style.backgroundColor = 'red';
testCounter.style.color = 'black';
throw new Error(message);
}
numTests++;
testCounter.innerHTML = numTests;
}
function warn(condition, message) {
if(!condition) {
if(testCounter.style.backgroundColor != 'red') {
testCounter.style.backgroundColor = 'orange';
testCounter.style.color = 'black';
}
console.warn(message);
}
numTests++;
testCounter.innerHTML = numTests;
}
function testDataUrl(actual, key, message) {
var expected = dataUrls[key];
if(actual !== expected) {
if(testCounter.style.backgroundColor != 'red') {
testCounter.style.backgroundColor = 'orange';
testCounter.style.color = 'black';
}
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
}
numTests++;
testCounter.innerHTML = numTests;
}
function testJSON(actual, expected, message) {
if(actual !== expected) {
if(testCounter.style.backgroundColor != 'red') {
testCounter.style.backgroundColor = 'orange';
testCounter.style.color = 'black';
}
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
console.log('actual:');
console.log(actual);
console.log('expected:');
console.log(expected);
}
numTests++;
testCounter.innerHTML = numTests;
}
function log(message) {
console.log('LOG: ' + message);
}
function showHit(layer) {
layer.hitCanvas._canvas.style.position = 'relative';
document.body.appendChild(layer.hitCanvas._canvas);
}
function Test() {
this.counter = 0;
testCounter = document.createElement('div');
testCounter.id = 'testCounter';
document.getElementsByTagName('body')[0].appendChild(testCounter);
}
Test.Modules = {};
Test.prototype = {
addTestContainer: function(key) {
var row = document.createElement('div');
var container = document.createElement('div');
var testMessage = document.createElement('p');
container.id = key;
document.body.appendChild(testMessage);
row.appendChild(container);
row.className = 'row';
document.body.appendChild(row);
return {
testMessage: testMessage
};
},
run: function() {
var testOnlySpecial = false;
var modules = Test.Modules;
// loop through modules
for(var mod in modules) {
var tests = modules[mod];
/*
* if a test key has a star in front of it, then
* only run special tests. This lets us easily run
* specific tests without running all of them
*/
for(var key in tests) {
if(key.charAt(0) === '*') {
testOnlySpecial = true;
break;
}
}
};
// loop through modules
for(var mod in modules) {
console.log('=================== ' + mod + ' TESTS ===================');
var tests = modules[mod];
// loop through tests
for(var key in tests) {
if(key.charAt(0) !== '!' && (!testOnlySpecial || key.charAt(0) === '*')) {
var obj = this.addTestContainer(key);
this.counter++;
console.log(this.counter + ') ' + mod + ' - ' + key);
tests[key](key);
obj.testMessage.innerHTML = this.counter + ') ' + mod + ' - ' + key + ': PASSED';
obj.testMessage.setAttribute('class', 'gray');
}
}
}
console.log('=================== ASYNC OUTPUT ===================');
}
};

552
tests/js/filterTests.js
View File

@@ -1,552 +0,0 @@
Test.Modules.IMAGE = {
'crop add and scale image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 292 - 186, 285 - 211],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
stage.add(layer);
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'crop and scale image', 'problem rendering cropped and scaled image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'create image hit region': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
// override color key with black
lion.colorKey = '000000';
layer.add(lion);
lion.createImageHitRegion(function() {
stage.add(layer);
layer.drawHit();
var hitDataUrl = layer.hitCanvas.toDataURL();
//console.log(hitDataUrl);
testDataUrl(hitDataUrl,'transparent image hit render', 'problem rendering image on hit graph');
});
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'grayscale image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
testDataUrl(layer.toDataURL(), 'grayscale image', 'problem with Grayscale filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'invert image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
layer.draw();
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'invert image', 'problem with Invert filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'adjust image brightness': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Brighten);
darth.setFilterBrightness(100);
layer.draw();
testDataUrl(layer.toDataURL(), 'adjust image brightness', 'problem with Brighten filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'gaussian blur filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Blur);
darth.setFilterRadius(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'colorizing filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor([255,0,128]);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'colorizing filter', 'problem with colorizing filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'shift hue filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.ShiftHue);
darth.setFilterHueShiftDeg(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterHueShiftDeg: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'shift hue filter', 'problem with hue shifting filter.');
};
imageObj.src = '../assets/lion.png';
},
'unsharp mask filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.UnsharpMask);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'unsharp mask filter', 'problem with unsharp mask filter.');
};
//imageObj.src = '../assets/darth-vader.jpg';
imageObj.src = '../assets/lion.png';
},
'soft blur filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.SoftBlur);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'soft blur filter', 'problem with soft blur filter.');
};
//imageObj.src = '../assets/darth-vader.jpg';
imageObj.src = '../assets/lion.png';
},
'edge detection filter 1': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Edge);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'sharpen filter', 'problem with sharpen filter.');
};
//imageObj.src = '../assets/darth-vader.jpg';
imageObj.src = '../assets/lion.png';
},
'emboss filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Emboss);
darth.setFilterAmount(50);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'emboss filter', 'problem with emboss filter.');
};
//imageObj.src = '../assets/darth-vader.jpg';
imageObj.src = '../assets/lion.png';
},
'filter transformed image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
darth = new Kinetic.Image({
x: 50,
y: 50,
//width: 438,
//height: 300,
image: imageObj,
draggable: true,
rotationDeg: 10,
scale: 0.3
});
darth.setOffset(darth.getWidth() / 2, darth.getHeight() / 2);
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'filter transformed image', 'problem filtering transformed image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'apply shadow to transparent image': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
layer.add(lion);
stage.add(layer);
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'transparent image shadow', 'problem applying shadow to image with transparent pixels');
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'mask unicolor background filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 600,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
var bamoon = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true
}),
filtered = new Kinetic.Image({
x: 300,
y: 0,
image: imageObj,
draggable: true
});
layer.add(bamoon);
layer.add(filtered);
stage.add(layer);
filtered.setFilter(Kinetic.Filters.Mask);
filtered.setFilterThreshold(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'mask filter', 'problem with Mask filter.');
};
imageObj.src = '../assets/bamoon.jpg';
}
};

1516
tests/js/functionalTests.js
View File

File diff suppressed because it is too large Load Diff

1599
tests/js/manualTests.js
View File

File diff suppressed because it is too large Load Diff

83
tests/js/performanceTests.js
View File

@@ -1,83 +0,0 @@
var startTime;
function start() {
startTime = new Date().getTime();
}
function stop(build, test) {
var t = new Date().getTime();
var diff = t - startTime;
console.log('[' + build.version + '] ' + test + ': ' + diff);
}
var tests = {
/*
'render 2,000 circles': function(Kinetic, container, test) {
start();
var stage = new Kinetic.Stage({
width: 500,
height: 200,
container: container
});
var layer = new Kinetic.Layer();
for (var n=0; n<2000; n++) {
var circle = new Kinetic.Circle({
x: Math.random() * 500,
y: Math.random() * 200,
radius: 40,
fill: 'red',
stroke: 'black',
strokeWidth: 3
});
layer.add(circle);
}
stage.add(layer);
stop(Kinetic, test);
}
*/
'render one circle 2,000 times': function(Kinetic, container, test) {
start();
var stage = new Kinetic.Stage({
width: 500,
height: 200,
container: container
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 43,
y: 43,
radius: 40,
fill: 'red',
stroke: 'black',
strokeWidth: 3
});
layer.add(circle);
stage.add(layer);
for (var n=0; n<2000; n++) {
layer.draw();
}
stop(Kinetic, test);
}
};
var body = document.getElementsByTagName('body')[0];
function run(Kinetic) {
body.innerHTML = '';
for (var k in tests) {
var div = document.createElement('div');
body.appendChild(div);
tests[k](Kinetic, div, k);
}
Kinetic = null;
}

143
tests/js/unit/animationTests.js
View File

@@ -1,143 +0,0 @@
Test.Modules.ANIMATION = {
/*
* WARNING: make sure that this is the first unit test that uses
* animation because it's accessing the global animation object which could
* be modified by other unit tests
*/
'test start and stop': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
var anim = new Kinetic.Animation(function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
var a = Kinetic.Animation;
test(a.animations.length === 0, '1should be no animations running');
anim.start();
test(a.animations.length === 1, '2should be 1 animation running');
anim.stop();
test(a.animations.length === 0, '3should be no animations running');
anim.start();
test(a.animations.length === 1, '4should be 1 animation running');
anim.start();
test(a.animations.length === 1, '5should be 1 animation runningg');
anim.stop();
test(a.animations.length === 0, '6should be no animations running');
anim.stop();
test(a.animations.length === 0, '7should be no animations running');
},
'layer batch draw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
draws = 0;
layer.on('draw', function() {
//console.log('draw')
draws++;
});
layer.draw();
layer.draw();
layer.draw();
test(draws === 3, 'draw count should be 3');
layer.batchDraw();
layer.batchDraw();
layer.batchDraw();
test(draws !== 6, 'should not be 6 draws');
setTimeout(function() {
layer.batchDraw();
}, 2000);
},
'stage batch draw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
draws = 0;
layer.on('draw', function() {
//console.log('draw')
draws++;
});
stage.draw();
stage.draw();
stage.draw();
test(draws === 3, 'draw count should be 3');
stage.batchDraw();
stage.batchDraw();
stage.batchDraw();
test(draws !== 6, 'should not be 6 draws');
setTimeout(function() {
stage.batchDraw();
}, 2000);
}
};

1401
tests/js/unit/containerTests.js
View File

File diff suppressed because it is too large Load Diff

218
tests/js/unit/layerTests.js
View File

@@ -1,218 +0,0 @@
Test.Modules.LAYER = {
'test canvas inline styles': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
var style = layer.getCanvas()._canvas.style;
test(style.position === 'absolute', 'canvas position style should be absolute');
test(style.border === '0px', 'canvas border style should be 0px');
test(style.margin === '0px', 'canvas margin style should be 0px');
test(style.padding === '0px', 'canvas padding style should be 0px');
test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
test(style.top === '0px', 'canvas top should be 0px');
test(style.left === '0px', 'canvas left should be 0px');
},
'layer getIntersection()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
throttle: 999
});
var layer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
id: 'redCircle'
});
var greenCircle = new Kinetic.Circle({
x: 300,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
id: 'greenCircle'
});
layer.add(redCircle);
layer.add(greenCircle);
stage.add(layer);
test(layer.getIntersection(300, 100).shape.getId() === 'greenCircle', 'shape should be greenCircle');
test(layer.getIntersection(380, 100).shape.getId() === 'redCircle', 'shape should be redCircle');
test(layer.getIntersection(100, 100) === null, 'shape should be null');
},
'set layer visibility': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
visible: false
});
var rect = new Kinetic.Rect({
x: 200,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: [3, 1],
draggable: true,
strokeScaleEnabled: false
});
rect.colorKey = '000000';
layer.add(rect);
stage.add(layer);
},
'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
clearBeforeDraw: false,
throttle: 999
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
group.add(circle);
layer.add(group);
stage.add(layer);
for(var n = 0; n < 20; n++) {
circle.move(10, 0);
layer.draw();
}
// TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
// disabled it for now because toDataURL breaks on devices with pixelRatio != 1
//console.log(layer.toDataURL());
},
'save layer as png (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'violet',
stroke: 'black',
strokeWidth: 4
});
Circle.on('click', function() {
window.open(layer.toDataURL());
});
layer.add(Circle);
stage.add(layer);
},
'save layer as low quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'violet',
stroke: 'black',
strokeWidth: 4
});
circle.on('click', function() {
window.open(layer.toDataURL({
mimeType: 'image/jpeg',
quality: 0.2
}));
});
layer.add(circle);
stage.add(layer);
},
'save layer as high quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'violet',
stroke: 'black',
strokeWidth: 4
});
circle.on('click', function() {
window.open(layer.toDataURL({
mimeType: 'image/jpeg',
quality: 1
}));
});
layer.add(circle);
stage.add(layer);
}
};

1550
tests/js/visualTests.js
View File

File diff suppressed because it is too large Load Diff