我想创建一个包含一些节点的 map 。添加节点效果很好，但设置背景图像却不行。文档没有描述如何添加节点和边之外的内容。
然后我尝试将 map 添加为节点的背景图像，如 [this]( https://codesandbox.io/s/thirsty-hamilton-wqyvn )
这个解决方案有一些问题:
- 边在节点下面。文档说，边缘将始终在节点下。 Z-index 不能解决问题。
- map 节点有一个我不需要的边框。
- 如果我在鼠标位于 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/