types fixes, konva-node updates

2026-01-09 11:34:38 +08:00 · 2019-07-11 04:59:39 +07:00
parent 8b38345f50
commit b798a56bff
6 changed files with 72 additions and 1393 deletions
--- a/test/sandbox2.html
+++ b/test/sandbox2.html
@@ -1,78 +1,27 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <script src="../../konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Canvas Scrolling Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
-        overflow: hidden;
        background-color: #f0f0f0;
-        height: 100%;
-        overflow: auto;
-      }
-
-      #large-container {
-        width: 3000px;
-        height: 3000px;
-        overflow: hidden;
-      }
-
-      #scroll-container {
-        width: calc(100% - 22px);
-        height: calc(100vh - 22px);
-        overflow: auto;
-        margin: 10px;
-        border: 1px solid grey;
      }
    </style>
  </head>

  <body>
-    <div id="scroll-container">
-      <div id="large-container"><div id="container"></div></div>
-    </div>
+    <canvas id="canvas"></div>
    <script>
-      var WIDTH = 3000;
-      var HEIGHT = 3000;
-      var NUMBER = 200;
+      var htmlCanvas = document.getElementById("canvas");
+      var offscreen = htmlCanvas.transferControlToOffscreen();

-      var stage = new Konva.Stage({
-        container: 'container',
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-
-      var layer = new Konva.Layer();
-      stage.add(layer);
-
-      function generateNode() {
-        return new Konva.Circle({
-          x: WIDTH * Math.random(),
-          y: HEIGHT * Math.random(),
-          radius: 50,
-          fill: 'red',
-          stroke: 'black'
-        });
-      }
-
-      for (var i = 0; i < NUMBER; i++) {
-        layer.add(generateNode());
-      }
-      layer.draw();
-
-      var scrollContainer = document.getElementById('scroll-container');
-      scrollContainer.addEventListener('scroll', function() {
-        var dx = scrollContainer.scrollLeft;
-        var dy = scrollContainer.scrollTop;
-        stage.container().style.transform =
-          'translate(' + dx + 'px, ' + dy + 'px)';
-        stage.x(-dx);
-        stage.y(-dy);
-        stage.batchDraw();
-      });
+      var w = new Worker('./worker.js');
+      w.onmessage = function(event) {
+        document.getElementById('result').innerHTML = event.data;
+      };
    </script>
  </body>
 </html>