如何在cytoscape.js中的节点外部使用背景图片

问题描述

我需要将三个图像设置为节点的背景，并编写以下代码段。中间是主图像，左右是辅助图像。

我希望左右两个图像不在节点边界区域之内并且在节点边界附近。我试图用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","background-position-x": ["12px","-15px","40px"],"background-position-y": ["12px","14px","14px"],// "background-clip": ["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的值应相对较小以提高性能。

background-image cytoscape.js javascript

如何在cytoscape.js中的节点外部使用背景图片

问题描述

解决方法

相关问答