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

Merge branch 'master' of github.com:ericdrowell/KineticJS

Browse Source
This commit is contained in:
Eric Rowell
2013-12-04 10:57:42 -08:00
parent 13a98a350c 21b0bb8574
commit 95d3f3fe45
15 changed files with 631 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
test/unit/filters/ColorPack-test.js
View File

@@ -108,14 +108,100 @@ suite('Color Pack', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.ShiftHue);
darth.setFilterHueShiftDeg(360);
darth.setFilter(Kinetic.Filters.HSV);
darth.setFilterHue(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterHueShiftDeg: 0,
filterHue: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('saturation 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.HSV);
darth.setFilterSaturation(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterSaturation: 0.001,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('value 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.HSV);
darth.setFilterValue(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterValue: 0.001,
easing: Kinetic.Easings.EaseInOut
});
@@ -279,4 +365,77 @@ suite('Color Pack', function() {
done();
});
// ======================================================
test('value gradient', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
// The important line!
shapesLayer.on('draw', function () {
var src, dst, i, w=40;
var ctx = this.getContext();
var ctxWidth = this.getCanvas().width;
var ctxHeight = this.getCanvas().height;
var xSize = Math.floor(ctxWidth/w);
var ySize = Math.floor(ctxHeight);
for( i=0; i<w; i+=1 ){
src = ctx.getImageData(i*xSize,0,xSize,ySize);
dst = ctx.createImageData(src);
Kinetic.Filters.HSV(src,dst,{value:2*(0.001+i)/w});
ctx.putImageData(dst,i*xSize,0);
//ctx.strokeRect(i*xSize,0,xSize,ySize);
}
});
var triangle = new Kinetic.RegularPolygon({
x: stage.getWidth() / 4,
y: stage.getHeight() / 2,
sides: 3,
radius: 80,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var circle = new Kinetic.Circle({
x: 3 * stage.getWidth() / 4,
y: stage.getHeight() / 2,
radius: 70,
fill: '#880000',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id: 'myCircle'
});
for( var i=0; i<10; i+=1 ){
for( var j=0; j<10; j+=1 ){
var rect = new Kinetic.Rect({
x: i/10*stage.getWidth(),
y: j/10*stage.getHeight(),
width: stage.getWidth()/10,
height: stage.getHeight()/10,
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
shapesLayer.add(rect);
}
}
shapesLayer.add(circle);
shapesLayer.add(triangle);
stage.add(shapesLayer);
done();
});
});

36
test/unit/filters/ColorStretch-test.js
View File

@@ -1,6 +1,6 @@
suite('Color Stretch', function () {
// ======================================================
test('enhancing colors', function (done) {
test('enhancing colors on layer', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
@@ -46,4 +46,38 @@ suite('Color Stretch', function () {
done();
});
// ======================================================
test('on image', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
var filt = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
var orig = new Kinetic.Image({
x: 200,
y: 10,
image: imageObj,
draggable: true
});
layer.add(filt);
layer.add(orig);
stage.add(layer);
filt.setFilter(Kinetic.Filters.ColorStretch);
layer.draw();
done();
};
imageObj.src = 'assets/bamoon.jpg';
});
});

42
test/unit/filters/Flip-test.js
View File

@@ -224,4 +224,46 @@ suite('Flip', function () {
done();
});
// ======================================================
test('on image', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
var xFlip = new Kinetic.Image({
x: 160,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.FlipX
});
var yFlip = new Kinetic.Image({
x: 320,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.FlipY
});
var noFlip = new Kinetic.Image({
x: 0,
y: 10,
image: imageObj,
draggable: true
});
layer.add(noFlip);
layer.add(xFlip);
layer.add(yFlip);
stage.add(layer);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
});

43
test/unit/filters/Levels-test.js
View File

@@ -127,4 +127,47 @@ suite('Levels', function () {
done();
});
// ======================================================
test('on image 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.Levels);
darth.setQuantizationLevels(16);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
quantizationLevels: 2,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});

42
test/unit/filters/Mirror-test.js
View File

@@ -193,4 +193,46 @@ suite('Mirror', function () {
done();
});
// ======================================================
test('on image', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
var xMirror = new Kinetic.Image({
x: 160,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.MirrorX
});
var yMirror = new Kinetic.Image({
x: 320,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.MirrorY
});
var noMirror = new Kinetic.Image({
x: 0,
y: 10,
image: imageObj,
draggable: true
});
layer.add(noMirror);
layer.add(xMirror);
layer.add(yMirror);
stage.add(layer);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
});

43
test/unit/filters/Noise-test.js
View File

@@ -63,4 +63,47 @@ suite('Noise', function () {
done();
});
// ======================================================
test('noise 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.Noise);
darth.setNoiseAmount(128);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
noiseAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

43
test/unit/filters/Threshold-test.js
View File

@@ -63,4 +63,47 @@ suite('Threshold', function () {
done();
});
// ======================================================
test('image 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.Threshold);
darth.setThresholdLevel(255);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
thresholdLevel: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});