mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
removed old test directory. added getter setter overloaders to Shape. Began redoing documentation on Node
This commit is contained in:
Eric Rowell
parent
9accc00cf3
commit
b273c29aee
227
src/Node.js
227
src/Node.js
@ -548,32 +548,11 @@
|
||||
}
|
||||
return level;
|
||||
},
|
||||
/**
|
||||
* set node position relative to parent
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Nubmer} pos.y
|
||||
* @returns {Kinetic.Node}
|
||||
* @example
|
||||
* // set x and <br>
|
||||
* node.setPosition({<br>
|
||||
* x: 5<br>
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
setPosition: function(pos) {
|
||||
this.setX(pos.x);
|
||||
this.setY(pos.y);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get node position relative to parent
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
getPosition: function() {
|
||||
return {
|
||||
x: this.getX(),
|
||||
@ -1255,13 +1234,6 @@
|
||||
this._setAttr(ID, id);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* set name
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {String} name
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
setName: function(name) {
|
||||
var oldName = this.getName();
|
||||
|
||||
@ -1427,183 +1399,198 @@
|
||||
return no;
|
||||
};
|
||||
// add getters setters
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'position');
|
||||
/**
|
||||
* get or set node position relative to parent
|
||||
* @name position
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Nubmer} pos.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get position<br>
|
||||
* var position = node.position();<br><br>
|
||||
*
|
||||
* // set position<br>
|
||||
* node.position({<br>
|
||||
* x: 5<br>
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'x', 0);
|
||||
|
||||
/**
|
||||
* set x position
|
||||
* @name setX
|
||||
* get or set x position
|
||||
* @name x
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get x position
|
||||
* @name getX
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get x<br>
|
||||
* var x = node.x();<br><br>
|
||||
*
|
||||
* // set x<br>
|
||||
* node.x(5);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'y', 0);
|
||||
|
||||
/**
|
||||
* set y position
|
||||
* @name setY
|
||||
* get or set y position
|
||||
* @name y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get y position
|
||||
* @name getY
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Integer}
|
||||
* @example
|
||||
* // get y<br>
|
||||
* var y = node.y();<br><br>
|
||||
*
|
||||
* // set y<br>
|
||||
* node.y(5);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'opacity', 1);
|
||||
|
||||
/**
|
||||
* set opacity. Opacity values range from 0 to 1.
|
||||
* get or set opacity. Opacity values range from 0 to 1.
|
||||
* A node with an opacity of 0 is fully transparent, and a node
|
||||
* with an opacity of 1 is fully opaque
|
||||
* @name setOpacity
|
||||
* @name opacity
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Object} opacity
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get opacity.
|
||||
* @name getOpacity
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get opacity<br>
|
||||
* var opacity = node.opacity();<br><br>
|
||||
*
|
||||
* // set opacity<br>
|
||||
* node.opacity(0.5);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetter(Kinetic.Node, 'name');
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name');
|
||||
|
||||
/**
|
||||
* get name
|
||||
* @name getName
|
||||
/**
|
||||
* set name
|
||||
* @name name
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {String} name
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get name<br>
|
||||
* var name = node.name();<br><br>
|
||||
*
|
||||
* // set name<br>
|
||||
* node.name('foo');
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetter(Kinetic.Node, 'id');
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id');
|
||||
|
||||
/**
|
||||
* get id
|
||||
* @name getId
|
||||
* set id
|
||||
* @name id
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {String} id
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get id<br>
|
||||
* var name = node.id();<br><br>
|
||||
*
|
||||
* // set id<br>
|
||||
* node.id('foo');
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addRotationGetterSetter(Kinetic.Node, 'rotation', 0);
|
||||
|
||||
/**
|
||||
* set rotation in radians
|
||||
* @name setRotation
|
||||
* get or set rotation in radians
|
||||
* @name rotation
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} theta
|
||||
* @returns {Kinetic.Node}
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get rotation in radians<br>
|
||||
* var rotation = node.rotation();<br><br>
|
||||
*
|
||||
* // set rotation in radians<br>
|
||||
* node.rotation(Math.PI / 2);
|
||||
*/
|
||||
|
||||
/**
|
||||
* set rotation in degrees
|
||||
* @name setRotationDeg
|
||||
* get or set rotation in degrees
|
||||
* @name rotationDeg
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} deg
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get rotation in degrees
|
||||
* @name getRotationDeg
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get rotation in radians
|
||||
* @name getRotation
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get rotation in degrees<br>
|
||||
* var rotationDeg = node.rotationDeg();<br><br>
|
||||
*
|
||||
* // set rotation in degrees<br>
|
||||
* node.rotationDeg(45);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
|
||||
|
||||
/**
|
||||
* set scale
|
||||
* @name setScale
|
||||
* get or set scale
|
||||
* @name scale
|
||||
* @param {Object} scale
|
||||
* @param {Number} scale.x
|
||||
* @param {Number} scale.y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Kinetic.Node}
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // set x and y <br>
|
||||
* shape.setScale({<br>
|
||||
* x: 20<br>
|
||||
* y: 10<br>
|
||||
* // get scale<br>
|
||||
* var scale = node.scale();<br><br>
|
||||
*
|
||||
* // set scale <br>
|
||||
* shape.scale({<br>
|
||||
* x: 2<br>
|
||||
* y: 3<br>
|
||||
* });
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale
|
||||
* @name getScale
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
|
||||
/**
|
||||
* set scale x
|
||||
* @name setScaleX
|
||||
* get or set scale x
|
||||
* @name scaleX
|
||||
* @param {Number} x
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale x
|
||||
* @name getScaleX
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get scale x<br>
|
||||
* var scaleX = node.scaleX();<br><br>
|
||||
*
|
||||
* // set scale x<br>
|
||||
* node.scaleX(2);
|
||||
*/
|
||||
|
||||
/**
|
||||
* set scale y
|
||||
* @name setScaleY
|
||||
* get or set scale y
|
||||
* @name scaleY
|
||||
* @param {Number} y
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Kinetic.Node}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale y
|
||||
* @name getScaleY
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @returns {Integer}
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get scale y<br>
|
||||
* var scaleY = node.scaleY();<br><br>
|
||||
*
|
||||
* // set scale y<br>
|
||||
* node.scaleY(2);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'skew', 0);
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: monospace
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
background-color: #333;
|
||||
color: #eee;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row > div {
|
||||
display: inline-block;
|
||||
background-color: #f0f0f0;
|
||||
width: 578px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#testCounter {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
background-color: green;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
}
|
||||
@ -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 ===================');
|
||||
}
|
||||
};
|
||||
@ -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';
|
||||
}
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,5 @@
|
||||
console.log('test')
|
||||
|
||||
var stage;
|
||||
var circlesLayer;
|
||||
var circles;
|
||||
@ -67,7 +69,7 @@
|
||||
var x = Math.random() * width;
|
||||
var y = Math.random() * height;
|
||||
if (VERSION === 'new') {
|
||||
circles[i].setPosition({x: x, y: y});
|
||||
circles[i].position({x: x, y: y});
|
||||
}
|
||||
else {
|
||||
circles[i].setPosition(x, y);
|
||||
|
||||
@ -2890,5 +2890,9 @@ suite('Node', function() {
|
||||
|
||||
circle.transformsEnabled(false);
|
||||
assert.equal(circle.transformsEnabled(), false);
|
||||
|
||||
circle.position({x: 6, y: 8});
|
||||
assert.equal(circle.position().x, 6);
|
||||
assert.equal(circle.position().y, 8);
|
||||
});
|
||||
});
|
||||
@ -483,4 +483,65 @@ suite('Shape', function() {
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;drawImage([object HTMLCanvasElement],0,0);restore();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('overloaded getters and setters', function(){
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'red',
|
||||
strokeWidth: 20,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
rect.stroke('blue');
|
||||
assert.equal(rect.stroke(), 'blue');
|
||||
|
||||
rect.strokeR(255);
|
||||
assert.equal(rect.strokeR(), 255);
|
||||
|
||||
rect.strokeG(20);
|
||||
assert.equal(rect.strokeG(), 20);
|
||||
|
||||
rect.strokeB(30);
|
||||
assert.equal(rect.strokeB(), 30);
|
||||
|
||||
rect.strokeRGB({r: 1, g: 2, b: 3});
|
||||
assert.equal(rect.strokeRGB().r, 1);
|
||||
assert.equal(rect.strokeRGB().g, 2);
|
||||
assert.equal(rect.strokeRGB().b, 3);
|
||||
|
||||
rect.lineJoin('bevel');
|
||||
assert.equal(rect.lineJoin(), 'bevel');
|
||||
|
||||
rect.lineCap('square');
|
||||
assert.equal(rect.lineCap(), 'square');
|
||||
|
||||
rect.strokeWidth(8);
|
||||
assert.equal(rect.strokeWidth(), 8);
|
||||
|
||||
rect.drawFunc('function');
|
||||
assert.equal(rect.drawFunc(), 'function');
|
||||
|
||||
rect.drawHitFunc('function');
|
||||
assert.equal(rect.drawHitFunc(), 'function');
|
||||
|
||||
rect.dashArray([1]);
|
||||
assert.equal(rect.dashArray()[0], 1);
|
||||
|
||||
// NOTE: skipping the rest because it would take hours to test all possible methods.
|
||||
// This should hopefully be enough to test Factor overloaded methods
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user