cytoscape.js - 在节点的右下角定位 cytoscape.js "loop"边缘，逆时针方向-6ren

cytoscape.js - 在节点的右下角定位 cytoscape.js "loop"边缘，逆时针方向

转载作者：行者123 更新时间：2023-12-03 17:24:25

如何设置 cytoscape.js 的样式 loop edge ' 以便它绕长(150px 宽)矩形节点的右下角逆时针旋转？
我一直在摆弄样式设置，只是想不通。我能说的最好的我应该能够调整这些样式以获得我想要的:

      selector: '.loop',
        style: {
          'loop-direction': '?deg',
          'loop-sweep': '?deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
        }
      },

就像这个箭头，红色的:

但我真的找不到比这个片段更好的东西了。我只是无法让曲线“翻转”到另一边。

window.addEventListener('DOMContentLoaded', function() {

  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    
    style: [{
        selector: 'node',
        style: {
          'width': 150,
          'shape': 'rectangle',
          'background-opacity': 0.5,
        }
      },

      {
        selector: 'edge',
        style: {
          'line-color': 'black',
          'target-arrow-color': 'black',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      },
      {
        selector: '.loop',
        style: {
          'loop-direction': '90deg', 
          'loop-sweep': '-90deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
        }
      },

    ],

    elements: {
      nodes: [{
        data: {
          id: 'n16'
        }
      }],
      edges: [{
        data: {
          source: 'n16',
          target: 'n16'
        },
        classes: 'loop'
      }, ]
    }
  });

});

#cy {
  width: 300px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>

<body>
  <h1>cytoscape loop edge demo</h1>

  <div id="cy"></div>

</body>

最佳答案

您的想法是正确的，但当端点用角度指定时(它们相对于形状边界!)，Cytoscape 似乎总是默认为顺时针循环。
如果您不诉诸“未捆绑的贝塞尔边缘”，您可以在其中手动指定控制点(以及边缘的曲线)，那么使用端点的预定义值可能就足够了:

window.addEventListener('DOMContentLoaded', function() {

  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    
    style: [{
        selector: 'node',
        style: {
          'width': 150,
          'shape': 'rectangle',
          'background-opacity': 0.5,
        }
      },

      {
        selector: 'edge',
        style: {
          'line-color': 'black',
          'target-arrow-color': 'black',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      },
      {
        selector: '.loop',
        style: {
          'loop-direction': '90deg', 
          'loop-sweep': '-90deg',
          'target-endpoint': 'outside-to-line',
          'source-endpoint': 'outside-to-line',
        }
      },

    ],

    elements: {
      nodes: [{
        data: {
          id: 'n16'
        }
      }],
      edges: [{
        data: {
          source: 'n16',
          target: 'n16'
        },
        classes: 'loop'
      }, ]
    }
  });

});

#cy {
  width: 300px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>

<body>
  <h1>cytoscape loop edge demo</h1>

  <div id="cy"></div>

</body>

您可以在此处找到这些值的引用:
https://js.cytoscape.org/#style/edge-endpoints

关于cytoscape.js - 在节点的右下角定位 cytoscape.js "loop"边缘，逆时针方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62645420/