lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 08:46:44 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

update node version, cleanup

Browse Source
This commit is contained in:
Anton Lavrenov
2018-05-24 11:21:32 +09:00
parent 63f7936240
commit 8c475c0637
10 changed files with 73 additions and 7947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@@ -1,6 +1,6 @@
language: node_js language: node_js
node_js: node_js:
- '6.0.0' - '8.0.0'
branches: branches:
only: only:
- master - master

6031
test/lib/blanket.js
View File

File diff suppressed because one or more lines are too long

43
test/performance/bunnies.html
View File

@@ -11,31 +11,13 @@
</head> </head>
<body> <body>
<div id='container'></div> <div id='container'></div>
<script src='http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/konva-v5.1.0.min.js'></script> <script src='../../dist/konva-dev.js'></script>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='http://www.html5canvastutorials.com/lib/stats/stats.js'></script> <script src='http://www.html5canvastutorials.com/lib/stats/stats.js'></script>
<script defer='defer'> <script defer='defer'>
var lastTime = 0; var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
window.requestAnimFrame = window.requestAnimationFrame;
var width = $(window).width(); var width = window.innerWidth;
var height = $(window).height(); var height = window.innerHeight;
var wabbitTexture; var wabbitTexture;
@@ -56,7 +38,6 @@
var amount = 10; var amount = 10;
var counter; var counter;
function onReady() {
var stage = new Konva.Stage({ var stage = new Konva.Stage({
container: 'container', container: 'container',
width: width - 10, width: width - 10,
@@ -91,17 +72,17 @@
container = stage; container = stage;
// stage.addChild(container); // stage.addChild(container);
$(stage.getContainer()).mousedown(function(){ stage.on('mousedown', function() {
isAdding = true; isAdding = true;
}); });
$(stage.getContainer()).mouseup(function(){ stage.on('mouseup', function() {
isAdding = false; isAdding = false;
}); });
document.addEventListener('touchstart', onTouchStart, true); document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true); document.addEventListener('touchend', onTouchEnd, true);
}
function _handleTextureLoaded (event) { function _handleTextureLoaded (event) {
for (var i = 0; i < startBunnyCount; i++) for (var i = 0; i < startBunnyCount; i++)
@@ -196,11 +177,9 @@
} }
layer.drawScene(); layer.drawScene();
requestAnimFrame(update); requestAnimationFrame(update);
stats.end(); stats.end();
} }
$(document).ready(onReady);
</script> </script>
</body> </body>

209
test/performance/bunnieswebgl.html
View File

@@ -1,209 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id='container'></div>
<script src='../konva.js'></script>
<script src='webgl-2d.js'></script>
<script src='konva.webgl.js'></script>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='../lib/stats.js'></script>
<script defer='defer'>
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
window.requestAnimFrame = window.requestAnimationFrame;
var width = $(window).width();
var height = $(window).height();
var wabbitTexture;
var bunnys = [];
var gravity = 0.75;
var maxX = width - 10;
var minX = 0;
var maxY = height - 10;
var minY = 0;
var startBunnyCount = 10;
var isAdding = false;
var count = 0;
var container;
var layer;
var stats;
var amount = 10;
var counter;
function onReady() {
var stage = new Konva.Stage({
container: 'container',
width: width - 10,
height: height - 10,
});
layer = new Konva.FastLayer();
stage.add(layer);
stats = new Stats();
wabbitTexture = new Image();
wabbitTexture.onload = function() {
_handleTextureLoaded();
};
wabbitTexture.src = '../assets/bunny.png';
document.body.appendChild( stats.domElement );
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
window.requestAnimationFrame(update);
counter = document.createElement('div');
counter.className = 'counter';
counter.style.position = 'absolute';
counter.style.top = '50px';
document.body.appendChild(counter);
count = startBunnyCount;
counter.innerHTML = startBunnyCount + ' BUNNIES';
container = stage;
// stage.addChild(container);
$(stage.getContainer()).mousedown(function(){
isAdding = true;
});
$(stage.getContainer()).mouseup(function(){
isAdding = false;
});
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
}
function _handleTextureLoaded (event) {
for (var i = 0; i < startBunnyCount; i++)
{
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
hitGraphEnabled: false,
x : 10,
y : 10
});
bunny.speedX = Math.random() * 10;
bunny.speedY = (Math.random() * 10) - 5;
bunnys.push(bunny);
// bunny.cache();
layer.add(bunny);
bunny.cache();
layer.draw();
}
}
function onTouchStart(event){
isAdding = true;
}
function onTouchEnd(event){
isAdding = false;
}
function update(){
stats.begin();
if(isAdding) {
// add 10 at a time :)
for (var i = 0; i < amount; i++)
{
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
x : 0,
y : 0
});
bunny.speedX = Math.random() * 10;
bunny.speedY = (Math.random() * 10) - 5;
// bunny.cache();
bunnys.push(bunny);
layer.add(bunny);
bunny.cache();
count++;
}
counter.innerHTML = count + ' BUNNIES';
}
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
bunny.setX(bunny.getX() + bunny.speedX);
bunny.setY(bunny.getY() + bunny.speedY);
bunny.speedY += gravity;
if (bunny.getX() > maxX - wabbitTexture.width)
{
bunny.speedX *= -1;
bunny.setX(maxX - wabbitTexture.width);
}
else if (bunny.getX() < minX)
{
bunny.speedX *= -1;
bunny.setX(minX);
}
if (bunny.getY() > maxY - wabbitTexture.height)
{
bunny.speedY *= -0.85;
bunny.setY(maxY - wabbitTexture.height);
if (Math.random() > 0.5)
{
bunny.speedY -= Math.random() * 6;
}
}
else if (bunny.getY() < minY)
{
bunny.speedY = 0;
bunny.setY(minY);
}
}
layer.drawScene();
requestAnimFrame(update);
stats.end();
}
$(document).ready(onReady);
</script>
</body>
</html>

116
test/performance/hit-ratio.html
View File

@@ -1,70 +1,74 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../dist/konva-dev.js"></script> <head>
<style>
body {
margin: 0px;
padding: 0px;
}
<script> canvas {
var stage = new Konva.Stage({ border: 1px solid #9C9898;
container: 'container', }
width: 500, </style>
height: 250 </head>
});
var layer = new Konva.Layer();
for(var j =0; j < 20; j++) { <body>
layer.add(new Konva.Circle({ <div id="container"></div>
x : stage.width() * Math.random(),
y : stage.height() * Math.random(),
radius : 50,
stroke : 'black',
fill : Konva.Util.getRandomColor(),
strokeWidth : 5,
draggable : true
}));
}
stage.add(layer); <script src="../../dist/konva-dev.js"></script>
var i, count = 500, start;
var start = Date.now(); <script>
for(i = 0; i< count; i++) { var stage = new Konva.Stage({
layer.draw(); container: 'container',
} width: 500,
var defTime = Date.now() - start; height: 250
});
var layer = new Konva.Layer();
layer.getHitCanvas().setPixelRatio(1); for (var j = 0; j < 20; j++) {
// layer.getCanvas().setPixelRatio(1); layer.add(new Konva.Circle({
x: stage.width() * Math.random(),
y: stage.height() * Math.random(),
radius: 50,
stroke: 'black',
fill: Konva.Util.getRandomColor(),
strokeWidth: 5,
draggable: true
}));
}
stage.add(layer);
var i, count = 500, start;
var start = Date.now();
for (i = 0; i < count; i++) {
layer.draw(); layer.draw();
}
var defTime = Date.now() - start;
start = Date.now(); layer.getHitCanvas().setPixelRatio(1);
for(i = 0; i< count; i++) { // layer.getCanvas().setPixelRatio(1);
layer.draw(); layer.draw();
}
var time1 = Date.now() - start;
layer.getHitCanvas().setPixelRatio(0.2); start = Date.now();
// layer.getCanvas().setPixelRatio(0.5); for (i = 0; i < count; i++) {
layer.draw(); layer.draw();
}
var time1 = Date.now() - start;
layer.getHitCanvas().setPixelRatio(0.2);
// layer.getCanvas().setPixelRatio(0.5);
layer.draw();
start = Date.now();
for (i = 0; i < count; i++) {
layer.draw();
}
var time05 = Date.now() - start;
console.log('def ' + defTime + ', 1 ration ' + time1 + ', 05 ration ' + time05)
</script>
</body>
start = Date.now();
for(i = 0; i< count; i++) {
layer.draw();
}
var time05 = Date.now() - start;
alert('def ' + defTime + ', 1 ration ' + time1 + ', 05 ration ' + time05)
</script>
</body>
</html> </html>

23
test/performance/random-squares-v5.0.1.html
View File

@@ -1,23 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/konva-v5.0.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../lib/stats.js"></script>
<script src="common/random-squares.js"></script>
</body>
</html>

57
test/performance/rotate-star.html
View File

@@ -1,57 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../dist/konva-dev.js"></script>
<script src="../lib/stats.js"></script>
<script src="../setStats.js"></script>
<script>
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 250,
y: 250,
innerRadius: 100,
outerRadius: 200,
numPoints: 500,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(star);
stage.add(layer);
var anim = new Konva.Animation(function() {
stats.begin();
star.rotate(0.1);
}, layer);
anim.start();
</script>
</body>
</html>

1535
test/performance/webgl-2d.js
View File

File diff suppressed because it is too large Load Diff

2
test/runner.html
View File

@@ -37,8 +37,6 @@
<script src="../node_modules/chai/chai.js"></script> <script src="../node_modules/chai/chai.js"></script>
<script src="lib/stats.js"></script> <script src="lib/stats.js"></script>
<!--<script src="lib/blanket.js"></script>-->
<!--CORE--> <!--CORE-->
<script src="../src/Global.js" data-cover></script> <script src="../src/Global.js" data-cover></script>
<script src="../src/Util.js" data-cover></script> <script src="../src/Util.js" data-cover></script>

2
test/unit/Node-cache-test.js
View File

@@ -700,7 +700,7 @@ suite('Caching', function() {
cloneAndCompareLayer(layer, 150); cloneAndCompareLayer(layer, 150);
}); });
test('test group with circle + buffer canvas usage', function() { test.only('test group with circle + buffer canvas usage', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);