Question

我正在使用 react-p5 来显示一些看起来像这样的数据 image.

节点的结构是这样的 -

nodes: [
    {
      id:1,
      label: "WEB",
      x: 200,
      y: 150,
      bgcolor: "#459bd7",
      radius: 80,
    },
    {
      id:2,
      label: "DATABASE",
      x: 400,
      y: 300,
      bgcolor: "#f5d608",
      radius: 100,
    }
]

链接的结构如下 -

links: [
    {
      source: 1,
      destination: 2,
      strokeWeight: 1,
    },
    {
      source: 1,
      destination: 3,
      strokeWeight: 5,
    }
  ]

我的 draw() 函数看起来像这样 -

let draw = (p5) => {
    p5.background("#ffffff")

    links.forEach(link=>{
      for(var i=0;i<nodes.length;i++){
        for(var j=0;j<nodes.length;j++){
          if(i!==j && link.source===nodes[i].id && link.destination===nodes[j].id){
            p5.stroke('#9e9e9e')
            p5.strokeWeight(link.strokeWeight);
            p5.line(nodes[i].x,nodes[i].y,nodes[j].x,nodes[j].y)
            break
          }
        }
      }
    })

    for(var i=0;i<nodes.length;i++){
      p5.stroke(nodes[i].bgcolor)
      p5.fill(nodes[i].bgcolor)
      p5.circle(nodes[i].x, nodes[i].y, nodes[i].radius);

      p5.textFont('Helvetica');
      p5.textSize(16);
      p5.strokeWeight(0);
      p5.fill(255)
      p5.textAlign(p5.CENTER);
      p5.text(nodes[i].label , nodes[i].x, nodes[i].y)
    }
}

我希望能够为此画布添加缩放功能。我想在用户向上/向下滚动时放大，使用 mouseWheel prop react-p5 提供。如果可能，请放大到特定节点。

我尝试使用 p5.js 提供的 scale() 函数，但由于我使用坐标定位节点，所以它变得一团糟。

我该怎么做？提前致谢！ :)

在 react-p5 中添加缩放功能

0 个答案: