performance updates

2025-10-08 00:14:23 +08:00 · 2020-07-30 10:44:15 -05:00
parent 2dbde0fd6f
commit dd84716715
7 changed files with 277 additions and 91 deletions
--- a/test/performance/bunnies.html
+++ b/test/performance/bunnies.html
@@ -10,8 +10,8 @@
  </head>
  <body>
    <div id="container"></div>
-    <script src="../../konva.js"></script>
-    <!-- <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script> -->
+    <!-- <script src="../../konva.js"></script> -->
+    <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
    <script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
    <script defer="defer">
      var lastTime = 0;
--- a/test/performance/creating_elements.html
+++ b/test/performance/creating_elements.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="../../konva.js"></script>
+    <!-- <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script> -->
+    <script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
+    <script defer="defer">
+      var lastTime = 0;
+
+      var width = window.innerWidth;
+      var height = window.innerHeight;
+
+      var maxX = width - 10;
+      var minX = 0;
+      var maxY = height - 10;
+      var minY = 0;
+
+      var startObjectsCount = 5000;
+      var isAdding = false;
+      var count = 0;
+      var container;
+      var layer;
+      var stats;
+      var amount = 10;
+      var counter;
+
+      var stage = new Konva.Stage({
+        container: 'container',
+        width: width - 10,
+        height: height - 10,
+      });
+      layer = new Konva.Layer();
+      stage.add(layer);
+      stats = new Stats();
+
+      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 = startObjectsCount;
+      counter.innerHTML = startObjectsCount + ' BUNNIES';
+
+      container = stage;
+      // stage.addChild(container);
+
+      stage.on('mousedown', function () {
+        isAdding = true;
+      });
+
+      stage.on('mouseup', function () {
+        isAdding = false;
+      });
+
+      document.addEventListener('touchstart', onTouchStart, true);
+      document.addEventListener('touchend', onTouchEnd, true);
+
+      function onTouchStart(event) {
+        isAdding = true;
+      }
+
+      function onTouchEnd(event) {
+        isAdding = false;
+      }
+
+      function update() {
+        stats.begin();
+        layer.destroyChildren();
+        if (isAdding) {
+          // add 10 at a time :)
+          count += 10;
+          counter.innerHTML = count + ' BUNNIES';
+        }
+        for (var i = 0; i < count; i++) {
+          var bunny = new Konva.Rect({
+            x: Math.random() * width,
+            y: Math.random() * height,
+            width: 50,
+            height: 50,
+            fill: Konva.Util.getRandomColor(),
+          });
+          layer.add(bunny);
+        }
+
+        requestAnimationFrame(update);
+        stats.end();
+      }
+    </script>
+  </body>
+</html>