How to set background image which will be zoom and drag?

问题

I want to create a map with some nodes. Adding nodes works great but setting the background image does not. The docs don't describe, how to add something besides nodes and edges.

Then I tried to add the map as a background image of a node like [this]( https://codesandbox.io/s/thirsty-hamilton-wqyvn)

This solution has some problems:

The edge is under the node. The docs say, that edges will be always under nodes. Z-index don't resolve the problem.
The map node has a border which I don't need.
If I try to zoom when my mouse is on the map node, zooming does not work and dragging neither.

回答1:

Cytoscape actually has an extension for this in the docs, you can read about 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>

来源：https://stackoverflow.com/questions/58586780/how-to-set-background-image-which-will-be-zoom-and-drag

标签

javascript

graph

cytoscape.js