个人中心
gpt4 book ai didi

javascript - 如何设置可以缩放和拖动的背景图片？

转载 作者：行者123 更新时间：2023-11-30 10:59:14 25 4
gpt4 key购买 nike

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

然后我尝试将 map 添加为节点的背景图像，如 [this]( https://codesandbox.io/s/thirsty-hamilton-wqyvn )

这个解决方案有一些问题:

  1. 边在节点下面。文档说，边缘将始终在节点下。 Z-index 不能解决问题。
  2. map 节点有一个我不需要的边框。
  3. 如果我在鼠标位于 map 节点上时尝试缩放，则缩放和拖动都不起作用。

最佳答案

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>

关于javascript - 如何设置可以缩放和拖动的背景图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58586780/

25 4 0
文章推荐： javascript - 如何使用 map 和 forEach 反转另一个数组中的 bool 数组？
文章推荐： ios - 继续到另一个 Storyboard
文章推荐： swift - 我可以将按钮放入单独的 View 中吗？
文章推荐： java - jOOQ - 用于插入的多字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com