Question

我正在使用 sigma.js 并拥有一个自定义节点渲染器，可将节点绘制为矩形。在矩形内部有更多的形状（基本上只是更多的矩形和一些文本）。我也在使用 dragNodes 插件。

现在，当用户想要点击某个节点或在画布上拖动它时，用户必须转到左上角坐标。但是，矩形（包含其中所有形状的最外面的矩形）代表整个节点。如何修改代码以指定节点的尺寸？

此外，尽管代码中未显示，但如果用户在节点矩形内部（在其中一个内部矩形上）单击，我也希望检测到它并进行回调。这可能吗？

显示我的问题的示例是 shown here ：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.1.0/sigma.min.js"></script>
    <script src="http://rawgit.com/jacomyal/sigma.js/master/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>
      $(document).ready(function() {
        console.log('ready');

        var g = { nodes: [], edges: [] };
        g.nodes.push({
          id: 'n1',
          label: 'node1',
          type: 'rtype',
          x: Math.random(),
          y: Math.random(),
          size: 1,
          color: '#666'
        });
        g.nodes.push({
          id: 'n2',
          label: 'node2',
          type: 'rtype',
          x: Math.random(),
          y: Math.random(),
          size: 1,
          color: '#666'
        });

        sigma.renderers.def = sigma.renderers.canvas;
        sigma.canvas.labels.rtype = function(node, context, settings) { };
        sigma.canvas.nodes.rtype = function(node, context, settings) {
          var prefix = settings('prefix') || '';
          var size = node[prefix + 'size'];
          var x = node[prefix + 'x'],
              y = node[prefix + 'y'];

          context.strokeStyle = 'rgb(0,0,0)';
          context.strokeRect(x, y, 200, 200);
        };
        sigma.canvas.drawLabels = true;

        var s = new sigma({
          graph: g,
          container: 'graph-container'
        });

        var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
      });
    </script>
  </head>

  <body>
    <div id="container">
      <style>
        #graph-container {
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          position: absolute;
        }
      </style>
      <div id="graph-container"></div>
    </div>
  </body>

</html>

如何在sigma.js中检测到具有自定义渲染器的节点何时被单击或悬停？

0 个答案: