时间戳

首页 > 解决方案 > 将 cytoscape.js “循环”边缘定位在节点的右下角，逆时针方向

cytoscape.js - 将 cytoscape.js “循环”边缘定位在节点的右下角，逆时针方向

问题描述

如何设置 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.js

解决方案

control-point-step-size能够通过添加密钥然后摆弄所有表盘来使其工作。我希望有一个“调试”模式，我可以看到这些刻度盘操纵的控制点和贝塞尔曲线：

  'loop-direction': '100deg', 
  'loop-sweep': '-20deg',
  'target-endpoint': '90deg',  // Up is 0 deg, going clockwise. From center of node, where the edge ends (pointing back into the node. 
  'source-endpoint': '105deg',  // Up is 0 deg, going clockwise. From center of node, where the edge comes out of the node.  
  'control-point-step-size': 72,

在此处输入图像描述

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': '100deg', 
          'loop-sweep': '-20deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
          'control-point-step-size': 72,
        }
      },

    ],

    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>

推荐阅读