some new files

2025-04-05 20:48:28 +08:00 · 2019-08-04 14:39:13 +07:00 · 2019-08-04 14:39:13 +07:00 · 7df6fc4f3f
commit 7df6fc4f3f
parent 34f0f4ae33
2 changed files with 185 additions and 0 deletions
--- a/test/performance/bunnies_native.html
+++ b/test/performance/bunnies_native.html
@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></div>
+    <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 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;
+
+      var canvas = document.getElementById('canvas');
+      canvas.width = width;
+      canvas.height = height;
+  
+      var ctx = canvas.getContext('2d');
+
+      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';
+
+
+      canvas.addEventListener('mousedown', function() {
+        isAdding = true;
+      });
+
+      canvas.addEventListener('mouseup', function() {
+        isAdding = false;
+      });
+
+      document.addEventListener('touchstart', onTouchStart, true);
+      document.addEventListener('touchend', onTouchEnd, true);
+
+      function _handleTextureLoaded(event) {
+        for (var i = 0; i < startBunnyCount; i++) {
+          bunny = {
+            x: 10,
+            y: 10,
+            speedX: Math.random() * 10,
+            speedY: Math.random() * 10 - 5
+          }
+          bunnys.push(bunny);
+        }
+      }
+
+      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++) {
+            bunny = {
+              x: 10,
+              y: 10,
+              speedX: Math.random() * 10,
+              speedY: Math.random() * 10 - 5
+            }
+            bunnys.push(bunny);
+            count++;
+          }
+          counter.innerHTML = count + ' BUNNIES';
+        }
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (var i = 0; i < bunnys.length; i++) {
+          var bunny = bunnys[i];
+          bunny.x = bunny.x + bunny.speedX;
+          bunny.y = bunny.y + bunny.speedY;
+          bunny.speedY += gravity;
+          if (bunny.x > maxX - wabbitTexture.width) {
+            bunny.speedX *= -1;
+            bunny.x = (maxX - wabbitTexture.width);
+          } else if (bunny.x < minX) {
+            bunny.speedX *= -1;
+            bunny.x = (minX);
+          }
+
+          if (bunny.y > maxY - wabbitTexture.height) {
+            bunny.speedY *= -0.85;
+            bunny.y = (maxY - wabbitTexture.height);
+            if (Math.random() > 0.5) {
+              bunny.speedY -= Math.random() * 6;
+            }
+          } else if (bunny.y < minY) {
+            bunny.speedY = 0;
+            bunny.y = (minY);
+          }
+          ctx.drawImage(wabbitTexture, bunny.x, bunny.y);
+        }
+        
+
+        requestAnimationFrame(update);
+        stats.end();
+      }
+    </script>
+  </body>
+</html>
--- a/test/worker.js
+++ b/test/worker.js
@ -0,0 +1,33 @@
+// Can we start Konva inside worker?
+
+importScripts('../../konva.js');
+console.log(Konva);
+
+Konva.Util.createCanvasElement = () => {
+  const canvas = new OffscreenCanvas(100, 100);
+  canvas.style = {};
+  return canvas;
+};
+
+Konva.Canvas.prototype.setSize = function(width, height) {
+  this.setWidth(width || 1);
+  this.setHeight(height || 1);
+};
+
+Konva.Stage.prototype._checkVisibility = function() {};
+
+var stage = new Konva.Stage({
+  width: 100,
+  height: 100
+});
+
+var layer = new Konva.Layer();
+stage.add(layer);
+
+var shape = new Konva.Circle({
+  x: stage.width() / 2,
+  y: stage.height() / 2,
+  radius: 50,
+  fill: 'red'
+});
+layer.add(shape);