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

resolved conflicts

Browse Source
This commit is contained in:
Eric Rowell
2013-09-29 13:02:54 -07:00
parent e8b479e89f 5af658af66
commit 0486904512
9 changed files with 910 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
test/runner.html
View File

@@ -74,6 +74,15 @@
<script src="unit/plugins/Path-test.js"></script>
<script src="unit/plugins/TextPath-test.js"></script>
<!-- filters -->
<script src="unit/filters/Blur-test.js"></script>
<script src="unit/filters/Brighten-test.js"></script>
<script src="unit/filters/ColorPack-test.js"></script>
<script src="unit/filters/Grayscale-test.js"></script>
<script src="unit/filters/Invert-test.js"></script>
<script src="unit/filters/Mask-test.js"></script>
<script src="unit/filters/ConvolvePack-test.js"></script>
<!--=============== functional tests ================-->
<script src="functional/MouseEvents-test.js"></script>

191
test/unit/filters/Blur-test.js Normal file
View File

@@ -0,0 +1,191 @@
suite('Blur', function() {
// ======================================================
test('basic blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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();
assert.equal(darth.getFilterRadius(), 10);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('tween blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterRadius: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Blur);
darth.setFilterRadius(10);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop tween blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Blur);
darth.setFilterRadius(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterRadius: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('transparency', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterRadius: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

150
test/unit/filters/Brighten-test.js Normal file
View File

@@ -0,0 +1,150 @@
suite('Brighten', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Brighten);
darth.setFilterBrightness(100);
layer.draw();
assert.equal(darth.getFilterBrightness(), 100);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('tween', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Brighten);
darth.setFilterBrightness(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterBrightness: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Brighten);
darth.setFilterBrightness(-50);
layer.draw();
assert.equal(darth.getFilterBrightness(), -50);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('tween transparency', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Brighten);
darth.setFilterBrightness(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterBrightness: -100,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

136
test/unit/filters/ColorPack-test.js Normal file
View File

@@ -0,0 +1,136 @@
suite('Color Pack', function() {
// ======================================================
test('colorize basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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();
// Assert fails even though '[255,0,128] = [255,0,128]'
//assert.equal(darth.getFilterColorizeColor(), [255,0,128]);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('colorize crop', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor([0,255,0]);
layer.draw();
// assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('colorize transparancy', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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([0,128,255]);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('hue shift tween transparancy', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

175
test/unit/filters/ConvolvePack-test.js Normal file
View File

@@ -0,0 +1,175 @@
suite('Convolve Pack', function() {
// ======================================================
test('emboss', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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();
});
done();
};
//imageObj.src = 'assets/darth-vader.jpg';
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('edge detect', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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(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();
});
done();
};
//imageObj.src = 'assets/darth-vader.jpg';
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('unsharp mask', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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(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();
});
done();
};
//imageObj.src = 'assets/darth-vader.jpg';
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('soft blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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(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();
});
done();
};
//imageObj.src = 'assets/darth-vader.jpg';
imageObj.src = 'assets/lion.png';
});
});

82
test/unit/filters/Grayscale-test.js Normal file
View File

@@ -0,0 +1,82 @@
suite('Filter Grayscale', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Grayscale);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
filter: Kinetic.Filters.Grayscale,
draggable: true
});
layer.add(darth);
stage.add(layer);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('with transparency', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Grayscale);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
});

84
test/unit/filters/Invert-test.js Normal file
View File

@@ -0,0 +1,84 @@
suite('Invert', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Invert);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('transparancy', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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.Invert);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
});

42
test/unit/filters/Mask-test.js Normal file
View File

@@ -0,0 +1,42 @@
suite('Mask', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
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();
done();
};
imageObj.src = 'assets/bamoon.jpg';
});
});