如何设置将要缩放和拖动的背景图像? [英] How to set background image which will be zoom and drag?

问题描述

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

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

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

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

解决方案

Cytoscape实际上在文档中对此有扩展，您可以阅读有关cytoscape canvas

  const background = new Image();background.onload =()=>{const cy = cytoscape({容器:document.getElementById("cy")，风格: [{选择器:节点"，CSS:{标签:数据(名称)"}}，{选择器:边缘"，CSS:{曲线样式":贝塞尔曲线"，"target-arrow-shape":三角形"}}]，元素:{节点:[{数据: {id:"j"，名称:杰里"}，位置: {x:77，y:76}}，{数据: {id:"e"，名称:"Elaine"}，位置: {x:465，y:76}}，{数据: {id:"k"，名称:"Kramer"}，位置: {x:77，y:365}}，{数据: {id:"g"，名称:乔治"}，位置: {x:485，y:365}}]，边缘:[{数据: {来源:"j"，目标:"e"}}，{数据: {来源:"j"，目标:"k"}}，{数据: {来源:"e"，目标:"j"}}，{数据: {来源:"k"，目标:"g"}}]}，布局: {名称:预设"}});const bottomLayer = cy.cyCanvas({z索引:-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();//绘制背景ctx.drawImage(background，0，0);//绘制跟随模型的文字ctx.font ="14px Helvetica";ctx.fillStyle =黑色";ctx.fillText(此文本遵循模型"，200，300);//在节点下绘制阴影ctx.shadowColor =黑色";ctx.shadowBlur = 25 * cy.zoom();ctx.fillStyle =白色";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();//绘制固定在画布中的文本bottomLayer.resetTransform(ctx);ctx.save();ctx.font ="14px Helvetica";ctx.fillStyle =红色";ctx.fillText(此文本是固定的"，200，200);ctx.restore();});};//预载图片background.src ="https://sun9-22.userapi.com/c855724/v855724779/1353a9/J3IbO5VbGMo.jpg";  

  #cy {宽度:100％;高度:100％;位置:绝对；左:0；最高:0;}  

 < head>< title> cytoscape-canvas.js演示</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>  

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:

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

解决方案

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>

这篇关于如何设置将要缩放和拖动的背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！