cytoscape js的可缩放背景 [英] Zoomable background for cytoscape js
问题描述
我们正在为一个项目制作图形。此图应显示城市的所有交叉路口。以及它们之间的大多数方式。我们开始使用cytoscape.js绘制图形。现在我们要在图形后面有一个背景。此背景将是该城市的地图，因此它必须可滚动并且在正确的位置。
We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
我们的第一个想法是制作一个矩形节点，并为其指定一个背景。然后，我们添加了地图并添加了正确的坐标。现在，地图可以滚动并且始终位于正确的位置。这给我们带来了两个问题。首先，该图无法再平移，因为尝试平移时会尝试选择基础节点。我们通过使用cytograh-panzoom插件解决了这个问题。
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
第二个问题是，边缘不再可单击，因为背景节点现在覆盖了
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
问题：
- 是否有更好的库来绘制这样的图形？
- 如果没有，是否可以在具有细胞景观的节点上绘制边缘？
- 用cytoscape还有另一种方法吗？
亲切的问候
推荐答案
您可以收听视口事件并更新背景位置并为您的cy div在CSS中设置背景图像的 background-size 属性。
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
或者代替背景图像，则可以有一个单独的div，其中的图像使用CSS变换而不是 background-* 属性。
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.
这篇关于cytoscape js的可缩放背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
