尝试将图像放入节点答案

【问题标题】：Trying to put images in nodes尝试将图像放入节点
【发布时间】：2023-02-08 22:55:32
【问题描述】：

我希望在我的 sigmaJS 图上的节点内添加图像。我知道这听起来很简单，但我做了很多研究，但找不到解决问题的正确方法。我希望这里有人可以帮助我！

我尝试了一些东西，包括 sigmaJS 官方网站上的示例。但是在所有已经打开但谈论旧版本 sigmaJS 的主题之间，我再也找不到它了。我只想要一个简单的 5 个节点图，每个节点中的图像相同。

【问题讨论】：

【解决方案1】：

您是否尝试使用渲染器？

<div id="container"></div>
<script src="path/to/sigma.min.js"></script>
<script>
  var s = new sigma({
    renderer: {
      container: document.getElementById('container'),
      type: 'canvas'
    },
    settings: {
      nodeBorderColor: 'default',
      defaultNodeBorderColor: '#000',
      defaultNodeType: 'img-node',
      nodeTypes: {
        'img-node': {
          render: function(node, context, settings) {
            var img = new Image();
            img.src = node.img;
            var x = node[s.camera.prefix + 'x'];
            var y = node[s.camera.prefix + 'y'];
            context.drawImage(img, x - node.size, y - node.size, node.size * 2, node.size * 2);
          }
        }
      }
    }
  });

  var node = {
    id: 'n0',
    label: 'Node with Image',
    x: 0,
    y: 0,
    size: 5,
    type: 'img-node',
    img: 'path/to/image.png'
  };

  s.graph.addNode(node);
  s.refresh();
</script>

在此示例中，我们首先创建一个 Sigma 实例并在 renderers 属性中指定一个自定义节点渲染器。自定义节点渲染器使用渲染函数绘制以节点的 x,y 位置为中心的图像。然后，我们向图中添加一个节点，该节点具有包含图像文件路径的 img 属性，并将其类型指定为 img-node。最后，我们调用 s.refresh() 来刷新图形并渲染自定义节点。

【讨论】：