mirror of
https://github.com/konvajs/konva.git
synced 2025-12-03 12:13:55 +08:00
Cleaned convolve pack, separated filter tests.
I removed the ability to do a convolution with a 1D matrix because I was using all 2D matrices. I also cleaned up some unused variables and filters. I took the entire group of tests dealing with image filters and put them into `filterTests.html` and `filterTests.js`. I removed them from `visualTests.js`.
This commit is contained in:
ippo615
@@ -14,104 +14,45 @@
|
||||
|
||||
// Determine the size and demsionality of the matrix
|
||||
// Note: it should be square and odd (3,5,7,9 etc...)
|
||||
var is2D = (matrix[0].length > 0) || 0,
|
||||
matrixSizeX = matrix.length,
|
||||
matrixSizeY = matrix.length,
|
||||
var matrixSizeX = matrix.length,
|
||||
matrixSizeY = matrix[0].length,
|
||||
matrixMidX = Math.floor(matrix.length/2),
|
||||
matrixMidY = Math.floor(matrix.length/2);
|
||||
|
||||
// Make sure we don't try to access pixels outside the image
|
||||
var xMax = Math.floor(imageSizeX - matrixSizeX/2),
|
||||
xMin = Math.floor(matrixSizeX/2),
|
||||
yMax = Math.floor(imageSizeY - matrixSizeY/2),
|
||||
yMin = Math.floor(matrixSizeY/2);
|
||||
matrixMidY = Math.floor(matrix[0].length/2);
|
||||
|
||||
// Accumlators and positions for iterating
|
||||
var r,g,b,a, x,y, px,py, pos, i,j;
|
||||
|
||||
// Handle the 2D matrix
|
||||
if( is2D ){
|
||||
for( y=0; y<imageSizeY; y+=1){
|
||||
for( x=0; x<imageSizeX; x+=1){
|
||||
|
||||
// Perform the convolution
|
||||
r = 0; g = 0; b = 0; a = 0;
|
||||
for( i=0; i<matrixSizeX; i+=1){
|
||||
for( j=0; j<matrixSizeY; j+=1){
|
||||
// tile the image to account for pixels past the
|
||||
// edge (and make sure they are positive)
|
||||
px = (x+i-matrixMidX) % imageSizeX;
|
||||
px = (px>0)?px:-px;
|
||||
py = (y+i-matrixMidY) % imageSizeY;
|
||||
py = (py>0)?py:-py;
|
||||
//pos = ((y+j)*imageSizeX+x+i)*4;
|
||||
// get the pixel
|
||||
pos = (py*imageSizeX + px)*4;
|
||||
r += matrix[j][i]*pixels[pos+0];
|
||||
g += matrix[j][i]*pixels[pos+1];
|
||||
b += matrix[j][i]*pixels[pos+2];
|
||||
//a += matrix[j][i]*pixels[pos+3];
|
||||
}
|
||||
}
|
||||
|
||||
// Store the result
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
result[pos+0] = r;
|
||||
result[pos+1] = g;
|
||||
result[pos+2] = b;
|
||||
//result[pos+3] = a;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Handle the 1D matrix
|
||||
else{
|
||||
// WARNING: THIS NEEDS TO BE UPDATED!!! TO HANDLE TILING
|
||||
// Horizontal pass (ie convolving every row of the image)
|
||||
for( y=0; y<imageSizeY; y+=1){
|
||||
for( x=xMin; x<xMax; x+=1){
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
|
||||
// Perform the convolution
|
||||
r = 0; g = 0; b = 0; a = 0;
|
||||
for( j=0; j<matrixSizeX; j+=1){
|
||||
pos += 4;
|
||||
r += matrix[j]*pixels[pos+0];
|
||||
g += matrix[j]*pixels[pos+1];
|
||||
b += matrix[j]*pixels[pos+2];
|
||||
//a += matrix[j]*pixels[pos+3];
|
||||
}
|
||||
|
||||
// Multiply by 1/2 because the other 1/2 comes from the vertical pass
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
result[pos+0] = r*0.5;
|
||||
result[pos+1] = g*0.5;
|
||||
result[pos+2] = b*0.5;
|
||||
//result[pos+3] = a*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical pass (ie convolving every column of the image)
|
||||
for( y=0; y<imageSizeY; y+=1){
|
||||
for( x=0; x<imageSizeX; x+=1){
|
||||
for( y=yMin; y<yMax; y+=1){
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
|
||||
// Perform the convolution
|
||||
r = 0; g = 0; b = 0; a = 0;
|
||||
for( j=0; j<matrixSizeX; j+=1){
|
||||
pos += 4*imageSizeX;
|
||||
r += matrix[j]*pixels[pos+0];
|
||||
g += matrix[j]*pixels[pos+1];
|
||||
b += matrix[j]*pixels[pos+2];
|
||||
//a += matrix[j]*pixels[pos+3];
|
||||
|
||||
// Perform the convolution
|
||||
r = 0; g = 0; b = 0; a = 0;
|
||||
for( i=0; i<matrixSizeX; i+=1){
|
||||
for( j=0; j<matrixSizeY; j+=1){
|
||||
|
||||
// tile the image to account for pixels past the
|
||||
// edge (and make sure they are positive)
|
||||
px = (x+i-matrixMidX) % imageSizeX;
|
||||
px = (px>0)?px:-px;
|
||||
py = (y+i-matrixMidY) % imageSizeY;
|
||||
py = (py>0)?py:-py;
|
||||
|
||||
// get the pixel and convolve
|
||||
pos = (py*imageSizeX + px)*4;
|
||||
r += matrix[j][i]*pixels[pos+0];
|
||||
g += matrix[j][i]*pixels[pos+1];
|
||||
b += matrix[j][i]*pixels[pos+2];
|
||||
//a += matrix[j][i]*pixels[pos+3];
|
||||
}
|
||||
|
||||
// Multiply by 1/2 and add to horizontal pass results
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
result[pos+0] += r*0.5;
|
||||
result[pos+1] += g*0.5;
|
||||
result[pos+2] += b*0.5;
|
||||
//result[pos+3] += a*0.5;
|
||||
}
|
||||
|
||||
// Store the result
|
||||
pos = (y*imageSizeX+x)*4;
|
||||
result[pos+0] = r;
|
||||
result[pos+1] = g;
|
||||
result[pos+2] = b;
|
||||
//result[pos+3] = a;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,7 +72,7 @@
|
||||
return Math.pow(Math.E, -dx*dx / (2*sigma*sigma));
|
||||
};
|
||||
|
||||
var make_blur_kernel = function( size, scale ){
|
||||
var make_blur_kernel = function( size, scale, sigma ){
|
||||
|
||||
// make sure size is odd:
|
||||
if( size % 2 === 0 ){ size += 1; }
|
||||
@@ -142,7 +83,7 @@
|
||||
for( i=0; i<size; i+=1 ){
|
||||
row = [];
|
||||
for( j=0; j<size; j+=1 ){
|
||||
row.push( scale * gaussian(i,size/2,1) * gaussian(j,size/2,1) );
|
||||
row.push( scale * gaussian(i,size/2,sigma) * gaussian(j,size/2,sigma) );
|
||||
}
|
||||
kernel.push(row);
|
||||
}
|
||||
@@ -150,14 +91,35 @@
|
||||
return kernel;
|
||||
};
|
||||
|
||||
var make_edge_detect_kernel = function( size, scale, sigma ){
|
||||
|
||||
// make sure size is odd:
|
||||
if( size % 2 === 0 ){ size += 1; }
|
||||
|
||||
// Create a difference-of-gaussians kernel (by subtracting gaussians)
|
||||
// 1.6 is a good sigma ratio to approximate a laplacian of gaussian
|
||||
var kernel = [], i,j, row, g;
|
||||
for( i=0; i<size; i+=1 ){
|
||||
row = [];
|
||||
for( j=0; j<size; j+=1 ){
|
||||
g1 = gaussian(i,size/2,sigma) * gaussian(j,size/2,sigma);
|
||||
g2 = gaussian(i,size/2,sigma*1.6) * gaussian(j,size/2,sigma*1.6);
|
||||
row.push( scale * (g2-g1) );
|
||||
}
|
||||
kernel.push(row);
|
||||
}
|
||||
|
||||
return kernel;
|
||||
};
|
||||
|
||||
var make_soft_blur_kernel = function( size, percent ){
|
||||
// A soft blur is achieve by blurring the image then
|
||||
// merging the blured and unblurred image (ie 60/40).
|
||||
// Instead of that we've scaling the blur kernel (ie 60)
|
||||
// and adding the identity scaled (ie 40) to the kernel
|
||||
var kernel = make_blur_kernel( size, percent / 100 ),
|
||||
var kernel = make_blur_kernel( size, percent, 1 ),
|
||||
mid = Math.floor(size/2);
|
||||
kernel[mid][mid] += 1 - (percent/100);
|
||||
kernel[mid][mid] += 1-percent;
|
||||
return kernel;
|
||||
};
|
||||
|
||||
@@ -166,9 +128,9 @@
|
||||
// and combining it with the original (like a soft blur but
|
||||
// with the blur negated). We can achieve this by negating
|
||||
// blur kernel, and adding twice the identity to that kernel.
|
||||
var kernel = make_blur_kernel( size, -percent / 100 ),
|
||||
var kernel = make_blur_kernel( size, -percent, 1 ),
|
||||
mid = Math.floor(size/2);
|
||||
kernel[mid][mid] += 1 + (percent/100);
|
||||
kernel[mid][mid] += 1+percent;
|
||||
return kernel;
|
||||
};
|
||||
|
||||
@@ -215,10 +177,7 @@
|
||||
*/
|
||||
Kinetic.Filters.UnsharpMask = function(imageData) {
|
||||
convolve_internal(imageData,
|
||||
make_unsharp_kernel(
|
||||
5,
|
||||
this.getFilterAmount()
|
||||
)
|
||||
make_unsharp_kernel(5,this.getFilterAmount()/100)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -230,26 +189,23 @@
|
||||
*/
|
||||
Kinetic.Filters.SoftBlur = function(imageData) {
|
||||
convolve_internal(imageData,
|
||||
make_soft_blur_kernel(
|
||||
5,
|
||||
this.getFilterAmount()
|
||||
)
|
||||
make_soft_blur_kernel(5,this.getFilterAmount()/100)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* sharpening filter, makes edges more pointed
|
||||
* edge detection filter, makes edges more noticable
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.Sharpen = function(imageData) {
|
||||
Kinetic.Filters.Edge = function(imageData) {
|
||||
var s = this.getFilterAmount()/100;
|
||||
if( s === 0 ){ return; }
|
||||
convolve_internal(imageData,[
|
||||
[ 0, -1*s, 0],
|
||||
[-1*s, 4*s,-1*s],
|
||||
[-1*s,(1-s)+4*s,-1*s],
|
||||
[ 0, -1*s, 0]
|
||||
]);
|
||||
};
|
||||
@@ -264,81 +220,9 @@
|
||||
var s = this.getFilterAmount()/100;
|
||||
if( s === 0 ){ return; }
|
||||
convolve_internal(imageData,[
|
||||
[-1*s,-.5*s, 0],
|
||||
[-.5*s,1+.5*s, .5*s],
|
||||
[ 0, .5*s, 1*s]
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* detects horizontal edges
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.DetectHorizontalEdges = function(imageData) {
|
||||
convolve_internal(imageData,[
|
||||
[-1,-1,-1],
|
||||
[ 2, 2, 2],
|
||||
[-1,-1,-1]
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* detects vertical edges
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.DetectVerticalEdges = function(imageData) {
|
||||
convolve_internal(imageData,[
|
||||
[-1, 2,-1],
|
||||
[-1, 2,-1],
|
||||
[-1, 2,-1]
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* detects 45* angle edges
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.DetectDiagonal45Edges = function(imageData) {
|
||||
convolve_internal(imageData,[
|
||||
[-1,-1, 2],
|
||||
[-1, 2,-1],
|
||||
[ 2,-1,-1]
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* detects 135* angle edges
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.DetectDiagonal135Edges = function(imageData) {
|
||||
convolve_internal(imageData,[
|
||||
[ 2,-1,-1],
|
||||
[-1, 2,-1],
|
||||
[-1,-1, 2]
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* detects edges
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.DetectEdges = function(imageData) {
|
||||
var s = this.getFilterAmount()/100;
|
||||
if( s === 0 ){ return; }
|
||||
convolve_internal(imageData,[
|
||||
[-1*s,-1*s,-1*s],
|
||||
[-1*s, 8*s,-1*s],
|
||||
[-1*s,-1*s,-1*s]
|
||||
[-1*s,-0.5*s, 0],
|
||||
[-0.5*s,1+0.5*s, 0.5*s],
|
||||
[ 0, 0.5*s, 1*s]
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
26
tests/html/filterTests.html
Normal file
26
tests/html/filterTests.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
/* overwrite CSS */
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css"href="../base.css">
|
||||
<script src="../../dist/kinetic-v0.0.0.js"></script>
|
||||
<script src="../assets/dataUrls.js"></script>
|
||||
<script src="../js/Test.js"></script>
|
||||
<script src="../js/filterTests.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var test = new Test();
|
||||
test.run();
|
||||
|
||||
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
|
||||
//console.log(evt.clientX + ',' + evt.clientY);
|
||||
}, false);
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@@ -7,9 +7,10 @@
|
||||
<li><a href="unitTests.html">Unit Tests (724)</a></li>
|
||||
<li><a href="functionalTests.html">Functional Tests (171)</a></li>
|
||||
<li><a href="visualTests.html">Visual Tests (46)</a></li>
|
||||
<li><a href="filterTests.html">Filter Tests</a></li>
|
||||
<li><a href="manualTests.html">Manual Tests</a></li>
|
||||
<li><a href="visualTests.html">Performance Tests</a></li>
|
||||
<li><a href="special/index.html">Special Tests</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
552
tests/js/filterTests.js
Normal file
552
tests/js/filterTests.js
Normal file
@@ -0,0 +1,552 @@
|
||||
|
||||
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1240,604 +1240,6 @@ Test.Modules.BLOB = {
|
||||
};
|
||||
|
||||
|
||||
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';
|
||||
},
|
||||
'sharpen 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.Sharpen);
|
||||
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';
|
||||
},
|
||||
'edge detection 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.DetectHorizontalEdge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectVerticalEdge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal45Edge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal135Edge);
|
||||
darth.setFilter(Kinetic.Filters.DetectEdges);
|
||||
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, 'edge detection filter', 'problem with edge detection 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';
|
||||
}
|
||||
};
|
||||
|
||||
Test.Modules.SPLINE = {
|
||||
'add splines': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Reference in New Issue
Block a user