Cystoscape超出画布边框

Question

我正在托盘中将对象包含在cytoscape画布内，而不会移动到最大宽度和高度之外，但是如果我将这些对象拖到画布内，它们会超出画布边框：

实际上，我不是使用HTML5中的画布，而是使用cytoscape.js插件中的画布，因此修复起来变得更加复杂。我已经看过cystoscape文档，以查看是否有任何方法可以固定边界并使内部内容具有吸收性，但没有找到任何东西。

我想知道是否有任何办法可以欺骗这个。

我的代码测试：

cystoscape box test

``

 $(document).ready(function () {
 // document.addEventListener('DOMContentLoaded', function() {

 $('#cyto').attr("title", "try clicking and dragging around the canvas and nodes");


 tippy('#cyto')

 cy = cytoscape({
     container: document.getElementById('cyto'),


     style: cytoscape.stylesheet()

         // style for the nodes
         .selector('node')
         .css({
             'width': 70,
             'height': 70,
             'content': 'data(id)',
             'text-align': 'center',
             'color': '#506874',
             'background-color': '#20b2aa',
             'font-family': 'Oswald',
             'shape': 'roundrectangle',
             'font-size': 20

         })

         // style for the connecting lines
         .selector('edge')
         .css({
             'width': .9,
             'height': 0.2,
             'curve-style': 'bezier',
             'target-arrow-shape': 'triangle',
             'target-arrow-color': '#F3A712',
             'line-color': '#F3A712',
             // 'line-color': '#C40E0E',

         })
         .selector(':selected')
         .css({
             'background-color': '#428bca',
             'line-color': '#C40E0E',
             'target-arrow-color': '#C40E0E',
             'source-arrow-color': '#C40E0E'
         })
         .selector('.faded')
         .css({
             'opacity': 1,
             'text-opacity': 0
         }),

     elements: [
         {
             group: 'nodes',
             data: {
                 id: 'WORDS'
             }
      }, {
             group: 'nodes',
             data: {
                 id: 'REALITY'
             }
      },
         {
             group: 'nodes',
             data: {
                 id: 'THE WORLD'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'PEOPLE'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge1',
                 source: 'PEOPLE',
                 target: 'WORDS'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge2',
                 source: 'PEOPLE',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge3',
                 source: 'ME',
                 target: 'WORDS'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge4',
                 source: 'WORDS',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge',
                 source: 'THE WORLD',
                 target: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge6',
                 source: 'PEOPLE',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge7',
                 source: 'ME',
                 target: 'THE WORLD'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge9',
                 source: 'WORDS',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge5',
                 source: 'REALITY',
                 target: 'ME'
             }
      }
    ],
 }); // end cytoscape
 }, false);

``

Answer 1

就像使用任何画布对象一样，您需要“侦听”拖动事件并根据位置进行操作。