mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
added some new perf tests
This commit is contained in:
Eric Rowell
parent
ae5b76d332
commit
4fafde7451
129
test/performance/common/random-squares.js
Normal file
129
test/performance/common/random-squares.js
Normal file
@ -0,0 +1,129 @@
|
||||
var stage;
|
||||
var circlesLayer;
|
||||
var circles;
|
||||
var stats;
|
||||
var width = 500;
|
||||
var height = 300;
|
||||
|
||||
var VERSION = Kinetic.version === '4.7.4' || Kinetic.version === 'dev' ? 'new' : 'old';
|
||||
|
||||
window.requestAnimFrame = (function(callback){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback){
|
||||
window.setTimeout(callback, 1000 / 30);
|
||||
};
|
||||
})();
|
||||
|
||||
function fpsCounter() {
|
||||
//fps stat---------------------------
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'fixed';
|
||||
stats.domElement.style.left = '0px';
|
||||
stats.domElement.style.top = '0px';
|
||||
$('html').append( stats.domElement );
|
||||
}
|
||||
|
||||
$(function() {
|
||||
fpsCounter();
|
||||
|
||||
make_stage();
|
||||
|
||||
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
|
||||
var colorIndex = 0;
|
||||
|
||||
circles = [];
|
||||
for(var n = 0; n < 1500; n++) {( function() {
|
||||
var color = colors[colorIndex++];
|
||||
if(colorIndex >= colors.length) {
|
||||
colorIndex = 0;
|
||||
}
|
||||
|
||||
var shape = make_shape(color);
|
||||
circlesLayer.add(shape);
|
||||
circles.push(shape);
|
||||
}());
|
||||
}
|
||||
|
||||
stage.add(circlesLayer);
|
||||
animate((new Date()).getTime());
|
||||
|
||||
});
|
||||
|
||||
function animate(lastTime){
|
||||
stats.begin();
|
||||
// update
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
var timeDiff = time - lastTime;
|
||||
var period = timeDiff/1000; //times per second, our period
|
||||
|
||||
for (var i = 0; i < circles.length; i++) {
|
||||
var x = Math.random() * width;
|
||||
var y = Math.random() * height;
|
||||
circles[i].setPosition(x, y);
|
||||
}
|
||||
lastTime = time;
|
||||
|
||||
circlesLayer.draw();
|
||||
stats.end();
|
||||
requestAnimFrame(function(){
|
||||
animate(lastTime);
|
||||
});
|
||||
}
|
||||
|
||||
function make_shape(color) {
|
||||
if (VERSION === 'new') {
|
||||
/*
|
||||
return new Kinetic.Rect({
|
||||
fill: color,
|
||||
width: 10,
|
||||
height: 10,
|
||||
listening: false
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
return new Kinetic.Shape({
|
||||
drawFunc: function(context) {
|
||||
var _context = context._context;
|
||||
_context.beginPath();
|
||||
_context.rect(0, 0, 10, 10);
|
||||
_context.closePath();
|
||||
_context.fillStyle = 'red';
|
||||
_context.fill();
|
||||
},
|
||||
listening: false
|
||||
});
|
||||
|
||||
} else {
|
||||
return new Kinetic.Shape(function(){
|
||||
var context = this.getContext();
|
||||
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 10, 10);
|
||||
context.fillStyle = 'red';
|
||||
context.fill();
|
||||
context.closePath();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function make_stage() {
|
||||
if (VERSION === 'new') {
|
||||
stage = new Kinetic.Stage({
|
||||
container: "container",
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
circlesLayer = new Kinetic.Layer();
|
||||
} else {
|
||||
stage = new Kinetic.Stage("container", width, height);
|
||||
circlesLayer = new Kinetic.Layer();
|
||||
}
|
||||
}
|
||||
6
test/performance/lib/stats.js
Normal file
6
test/performance/lib/stats.js
Normal file
@ -0,0 +1,6 @@
|
||||
// stats.js - http://github.com/mrdoob/stats.js
|
||||
var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
|
||||
i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");
|
||||
k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display=
|
||||
"block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=
|
||||
a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};
|
||||
21
test/performance/random-squares-v3.6.2.html
Normal file
21
test/performance/random-squares-v3.6.2.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!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/kinetic-v3.6.2.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>
|
||||
24
test/performance/random-squares-v4.7.4.html
Normal file
24
test/performance/random-squares-v4.7.4.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!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/kinetic-v4.7.4.js"></script>-->
|
||||
<script src="../../dist/kinetic-dev.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>
|
||||
Loading…
Reference in New Issue
Block a user