Question

我想创建一个包含一些节点的地图。添加节点效果很好，但是设置背景图片却没有效果。文档没有描述如何在节点和边缘之外添加内容。

然后我尝试将地图添加为[this]（ https://codesandbox.io/s/thirsty-hamilton-wqyvn）

此解决方案存在一些问题：

边缘在节点下。文档说，边缘将始终位于节点下。 Z-index无法解决问题。
地图节点具有不需要的边框。
如果我尝试在鼠标位于地图节点上时进行缩放，则缩放将不起作用，也不会拖动。

Answer 1

Cytoscape实际上在文档中对此有一个扩展，您可以阅读有关cytoscape canvas here的信息：

const background = new Image();
background.onload = () => {
  const cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        css: {
          label: "data(name)"
        }
      },
      {
        selector: "edge",
        css: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle"
        }
      }
    ],
    elements: {
      nodes: [{
          data: {
            id: "j",
            name: "Jerry"
          },
          position: {
            x: 77,
            y: 76
          }
        },
        {
          data: {
            id: "e",
            name: "Elaine"
          },
          position: {
            x: 465,
            y: 76
          }
        },
        {
          data: {
            id: "k",
            name: "Kramer"
          },
          position: {
            x: 77,
            y: 365
          }
        },
        {
          data: {
            id: "g",
            name: "George"
          },
          position: {
            x: 485,
            y: 365
          }
        }
      ],
      edges: [{
          data: {
            source: "j",
            target: "e"
          }
        },
        {
          data: {
            source: "j",
            target: "k"
          }
        },
        {
          data: {
            source: "e",
            target: "j"
          }
        },
        {
          data: {
            source: "k",
            target: "g"
          }
        }
      ]
    },
    layout: {
      name: "preset"
    }
  });

  const bottomLayer = cy.cyCanvas({
    zIndex: -1
  });
  const canvas = bottomLayer.getCanvas();
  const ctx = canvas.getContext("2d");

  cy.on("render cyCanvas.resize", evt => {
    bottomLayer.resetTransform(ctx);
    bottomLayer.clear(ctx);
    bottomLayer.setTransform(ctx);

    ctx.save();
    // Draw a background
    ctx.drawImage(background, 0, 0);

    // Draw text that follows the model
    ctx.font = "14px Helvetica";
    ctx.fillStyle = "black";
    ctx.fillText("This text follows the model", 200, 300);

    // Draw shadows under nodes
    ctx.shadowColor = "black";
    ctx.shadowBlur = 25 * cy.zoom();
    ctx.fillStyle = "white";
    cy.nodes().forEach(node => {
      const pos = node.position();
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, 10, 0, 2 * Math.PI, false);
      ctx.fill();
    });
    ctx.restore();

    // Draw text that is fixed in the canvas
    bottomLayer.resetTransform(ctx);
    ctx.save();
    ctx.font = "14px Helvetica";
    ctx.fillStyle = "red";
    ctx.fillText("This text is fixed", 200, 200);
    ctx.restore();
  });
};

// Preload images
background.src =
 "https://sun9-22.userapi.com/c855724/v855724779/1353a9/J3IbO5VbGMo.jpg";

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<head>
  <title>cytoscape-canvas.js demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/cytoscape-canvas/dist/cytoscape-canvas.js"></script>
</head>

<body>
  <div id="cy" />
</body>

如何设置背景图像进行缩放和拖动？

1 个答案: