added some new perf tests

2025-10-15 04:14:52 +08:00 · 2013-11-29 13:49:59 -08:00
parent ae5b76d332
commit 4fafde7451
4 changed files with 180 additions and 0 deletions
--- a/test/performance/common/random-squares.js
+++ b/test/performance/common/random-squares.js
@@ -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();
+        }
+      }