cytoscape.js 如何在节点外使用背景图片
How to use background images outside of nodes in cytoscape.js
我需要设置三张图片作为node的背景,写了下面的代码片段。中间是主图,左右是副图
我预计左右两幅图像在节点边界区域之外并且靠近节点边界。我试图用 background-position-x
设置预期的位置。但是当移出节点边界时图像被裁剪了。
我尝试了 "background-clip": "none"
和 "background-clip": ["none", "none", "none"]
,但两者都没有帮助。
有什么解决办法吗?谢谢。
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
ready: function() {
},
style: [{
selector: "node",
style: {
"border-color": "#B0B0B0",
"border-width": "1px",
"border-style": "solid",
"background-color": "#FFF",
"background-fit": "none",
"font-size": "12px",
"text-max-width": "120px",
"text-wrap": "ellipsis",
"text-events": "yes",
"text-margin-y": "5px",
"min-zoomed-font-size": "7px",
"text-halign": "center",
"text-valign": "bottom",
"background-image": ['https://js.cytoscape.org/img/cytoscape-logo.svg','https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png','https://www.flaticon.com/premium-icon/icons/svg/1688/1688124.svg'],
"background-width": ["24px", "20px", "20px"],
"background-height": ["24px", "20px", "20px"],
"background-position-x": ["12px", "-15px", "40px"],
"background-position-y": ["12px", "14px", "14px"],
// "background-clip": ["none", "none", "none"],
"background-clip": "none",
width: "48px",
height: "48px",
padding: "0px",
}
},
],
elements: [{
group: "nodes",
data: {
id: "n0"
}
},
],
}));
});
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
}
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!--polyfills are needed for this extension for old browsers like IE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"></script>
<body>
<div id="cy"></div>
</body>
来自 https://js.cytoscape.org/#style/background-image :
要将图像放在节点主体的边界之外,需要指定 background-clip: none 和 bounds-expansion: n 用于超出边界 n 像素的图像节点的边界框。请注意,n 的值应该相对较小以提高性能。
我需要设置三张图片作为node的背景,写了下面的代码片段。中间是主图,左右是副图
我预计左右两幅图像在节点边界区域之外并且靠近节点边界。我试图用 background-position-x
设置预期的位置。但是当移出节点边界时图像被裁剪了。
我尝试了 "background-clip": "none"
和 "background-clip": ["none", "none", "none"]
,但两者都没有帮助。
有什么解决办法吗?谢谢。
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
ready: function() {
},
style: [{
selector: "node",
style: {
"border-color": "#B0B0B0",
"border-width": "1px",
"border-style": "solid",
"background-color": "#FFF",
"background-fit": "none",
"font-size": "12px",
"text-max-width": "120px",
"text-wrap": "ellipsis",
"text-events": "yes",
"text-margin-y": "5px",
"min-zoomed-font-size": "7px",
"text-halign": "center",
"text-valign": "bottom",
"background-image": ['https://js.cytoscape.org/img/cytoscape-logo.svg','https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png','https://www.flaticon.com/premium-icon/icons/svg/1688/1688124.svg'],
"background-width": ["24px", "20px", "20px"],
"background-height": ["24px", "20px", "20px"],
"background-position-x": ["12px", "-15px", "40px"],
"background-position-y": ["12px", "14px", "14px"],
// "background-clip": ["none", "none", "none"],
"background-clip": "none",
width: "48px",
height: "48px",
padding: "0px",
}
},
],
elements: [{
group: "nodes",
data: {
id: "n0"
}
},
],
}));
});
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
}
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!--polyfills are needed for this extension for old browsers like IE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"></script>
<body>
<div id="cy"></div>
</body>
来自 https://js.cytoscape.org/#style/background-image :
要将图像放在节点主体的边界之外,需要指定 background-clip: none 和 bounds-expansion: n 用于超出边界 n 像素的图像节点的边界框。请注意,n 的值应该相对较小以提高性能。