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

Question

如何设置 cytoscape.js ' loop edge '的样式，使其围绕长（150px 宽）矩形节点的右下角逆时针旋转？

我一直在摆弄样式设置，只是想不通。我能说的最好的我应该能够调整这些样式以获得我想要的：

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

就像这个箭头，红色的：

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

      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;
}

Answer 1

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,

  '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;
}