HTML5画布交互散点图20000节点使用kineticjs

最新推荐文章于 2024-08-17 10:00:25 发布

翻译最新推荐文章于 2024-08-17 10:00:25 发布 · 732 阅读

文章标签：

#kineticjs散点的代码 #html5散点代码

比较好看的kineticjs散点专栏收录该内容

1 篇文章

订阅专栏

本实验的目的是证明她剪，kineticjs可以通过绘制20000个圆是mouseover事件敏感的手柄，可拖动节点数。这个实验也是一个很好的演示事件委托，在一个单一的事件处理程序附加到期处理循环事件。

说明：在节点的老鼠看到更多信息，然后拖放到舞台

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
    <script defer="defer">
      function addNode(obj, layer) {
        var node = new Kinetic.Circle({
          x: obj.x,
          y: obj.y,
          radius: 4,
          fill: obj.color,
          id: obj.id
        });

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

      var tooltipLayer = new Kinetic.Layer();
      var dragLayer = new Kinetic.Layer();
      
      var tooltip = new Kinetic.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });
      
      tooltip.add(new Kinetic.Tag({
        fill: 'black',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.2
      }));
      
      tooltip.add(new Kinetic.Text({
        text: '',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }));
      
      tooltipLayer.add(tooltip);
      
      // build data
      var data = [];
      var width = stage.getWidth();
      var height = stage.getHeight();
      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 Kinetic.Layer();
      for(var n = 0; n < data.length; n++) {
        addNode(data[n], layer);
        nodeCount++;
        if(nodeCount >= 1000) {
          nodeCount = 0;
          stage.add(layer);
          layer = new Kinetic.Layer();
        }
      }

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

      stage.on('mouseover mousemove dragmove', function(evt) {
        var node = evt.targetNode;
        if (node) {
          // update tooltip
          var mousePos = node.getStage().getMousePosition();
          tooltip.setPosition(mousePos.x, mousePos.y - 5);
          tooltip.getText().setText("node: " + node.getId() + ", color: " + node.getFill());
          tooltip.show();
          tooltipLayer.draw();
        }
      }); 

      stage.on('mouseout', function(evt) {
        tooltip.hide();
        tooltipLayer.draw();
      });
      
      var startLayer;
      
      stage.on('mousedown', function(evt) {
        var shape = evt.targetNode;
        if (shape) {
          startLayer = shape.getLayer();
          shape.moveTo(dragLayer);
          startLayer.draw();
          // manually trigger drag and drop
          shape.startDrag();
        }
      });
      
      stage.on('mouseup', function(evt) {
        var shape = evt.targetNode;
        if (shape) {
          shape.moveTo(startLayer);
          dragLayer.draw();
          startLayer.draw();
        }
      });

    </script>
  </body>
</html>