互动散点图与 20,000 个节点

本实验的目的是通过渲染 20,000 个圆形，展示 Konva 能够处理的节点数量。每个圆形都对鼠标悬停事件敏感，并且可以被拖放。这个实验也是事件委托的一个很好的示例，单个附加到舞台的事件处理程序处理圆形事件。

操作指南：将鼠标悬停在节点上以查看更多信息，然后在舞台上拖放它们。

Konva 20000 Nodes Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Interactive Scatter Plot with 20,000 Nodes Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      function addNode(obj, layer) {
        var node = new Konva.Circle({
          x: obj.x,
          y: obj.y,
          radius: 4,
          fill: obj.color,
          id: obj.id,
        });

        layer.add(node);
      }
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var tooltipLayer = new Konva.Layer();
      var dragLayer = new Konva.Layer();

      var tooltip = new Konva.Label({
        opacity: 0.75,
        visible: false,
        listening: false,
      });

      tooltip.add(
        new Konva.Tag({
          fill: 'black',
          pointerDirection: 'down',
          pointerWidth: 10,
          pointerHeight: 10,
          lineJoin: 'round',
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowOffsetY: 10,
          shadowOpacity: 0.2,
        })
      );

      tooltip.add(
        new Konva.Text({
          text: '',
          fontFamily: 'Calibri',
          fontSize: 18,
          padding: 5,
          fill: 'white',
        })
      );

      tooltipLayer.add(tooltip);

      // build data
      var data = [];

      var colors = ['red', 'orange', 'cyan', 'green', 'blue', 'purple'];
      for (var n = 0; n < 20000; n++) {
        var x = Math.random() * width;
        var y = height + Math.random() * 200 - 100 + (height / width) * -1 * x;
        data.push({
          x: x,
          y: y,
          id: n,
          color: colors[Math.round(Math.random() * 5)],
        });
      }

      // render data
      var nodeCount = 0;
      var layer = new Konva.Layer();
      for (var n = 0; n < data.length; n++) {
        addNode(data[n], layer);
        nodeCount++;
        if (nodeCount >= 1000) {
          nodeCount = 0;
          stage.add(layer);
          layer = new Konva.Layer();
        }
      }

      stage.add(dragLayer);
      stage.add(tooltipLayer);

      stage.on('mouseover mousemove dragmove', function (evt) {
        var node = evt.target;
        if (node) {
          // update tooltip
          var mousePos = node.getStage().getPointerPosition();
          tooltip.position({
            x: mousePos.x,
            y: mousePos.y - 5,
          });
          tooltip
            .getText()
            .text('node: ' + node.id() + ', color: ' + node.fill());
          tooltip.show();
        }
      });

      stage.on('mouseout', function (evt) {
        tooltip.hide();
      });

      var startLayer;

      stage.on('mousedown', function (evt) {
        var shape = evt.target;
        if (shape) {
          startLayer = shape.getLayer();
          shape.moveTo(dragLayer);
          // manually trigger drag and drop
          shape.startDrag();
        }
      });

      stage.on('mouseup', function (evt) {
        var shape = evt.target;
        if (shape) {
          shape.moveTo(startLayer);
        }
      });
    </script>
  </body>
</html>