通过鼠标滚轮调整Cytoscape.js中的缩放比例。

Question

通过鼠标滚轮调整Cytoscape.js中的缩放比例。

javascriptcytoscape.js

3

我正在使用Cytoscape.js来绘制一个图形。

问题是我想要调整缩放比例，即鼠标滚轮触发的zoom事件收到的缩放比例。

现在当我向前或向后滚动时，缩放比例会增加或减少超出预期...导致用户体验不佳...

我在文档中找不到如何实现或设置这些比例值...我知道滚轮灵敏度是可配置的，但不建议进行设置。

有没有办法确定每次滚动鼠标滚轮时的比例缩放方式？

- piraces

2个回答

0

您可以使用cy.minZoom()和cy.maxZoom()来设置值。在鼠标和触摸缩放时，缩放级别应保持在此范围内。下面是我的示例，用于在单击事件上设置缩放。

cy.on("click","node",function(event) {
     
      cy.minZoom(0.5)
      cy.maxZoom(2.5)

- Poornima T

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Corentin · Accepted Answer

您所寻找的属性是 wheelSensitivity。调整它的值可更改缩放比例。请小心使用，因为它有时会影响渲染。

我在下面的示例中将其设置为0.4：

    <!DOCTYPE>
    
    <html>
      <head>
    
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    
        <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    
        <style>
          body {
            font-family: helvetica;
            font-size: 14px;
          }
    
          #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
          }
    
          h1 {
            opacity: 0.5;
            font-size: 1em;
          }
        </style>
    
        <script>
          window.addEventListener('DOMContentLoaded', function(){
    
            var cy = window.cy = cytoscape({
              container: document.getElementById('cy'),
    
              boxSelectionEnabled: false,
              autounselectify: true,
              wheelSensitivity: 0.4,
    
              style: [
                {
                  selector: 'node',
                  style: {
                    'background-color': '#11479e'
                  }
                },
    
              ],
    
              elements: {
                nodes: [
                  { data: { id: 'n0' } },
                  { data: { id: 'n1' } },
                  { data: { id: 'n2' } },
      
                ],
                edges: [
                  { data: { source: 'n0', target: 'n1' } },
                  { data: { source: 'n1', target: 'n2' } },
                  { data: { source: 'n0', target: 'n2' } }
    
                ]
              }
            });
    
          });
        </script>
      </head>
    
      <body>
        <div id="cy"></div>
      </body>
    
    </html>