Блог

Главная - Вопросы по программированию - Отрегулируйте масштаб масштабирования в Cytoscape.js запускается колесиком мыши

Отрегулируйте масштаб масштабирования в Cytoscape.js запускается колесиком мыши

#javascript #cytoscape.js

#javascript #cytoscape.js

Вопрос:

Я использую Cytoscape.js , чтобы нарисовать график. Проблема в том, что я хочу настроить масштаб масштабирования, который zoom получает событие, которое запускает колесо мыши.

Теперь, когда я прокручиваю вперед или назад, масштаб увеличивается или уменьшается больше, чем ожидалось… что приводит к плохому взаимодействию с пользователем…

Я не смог найти в документах, как достичь или установить значения этого масштаба… Я знаю, что чувствительность колеса настраивается, но устанавливать ее не рекомендуется.

Есть ли какой-либо способ установить, как масштабировать при каждой прокрутке колеса?

Ответ №1:

Свойство, которое вы ищете, это 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>

Комментарии:

1. Спасибо за ваш ответ… Тем не менее, предупреждение меня раздражает, но я протестирую его на разных устройствах.

2. В документах говорится об этом о предупреждениях: обратите внимание, что Cytoscape.js будет выводить предупреждающие сообщения на консоль, чтобы помочь программистам избежать ошибок. Если вы хотите отключить эти сообщения, вызовите cytoscape.warnings(false) , чтобы полностью отключить предупреждения. Вы можете снова включить их с cytoscape.warnings(true) помощью, и вы можете получить текущее состояние с cytoscape.warnings() помощью . Рекомендуется оставлять предупреждения включенными, по крайней мере, для сборок вашего приложения.

3. @Corentin есть ли способ организовать это с помощью Javascript? Например, cy.style().width() можно упорядочить, но я не знаю, как это сделать с помощью чувствительности колеса.

Ответ №2:

Вы можете использовать cy.minZoom() и cy.maxZoom() для установки значений. Уровни масштабирования должны поддерживаться между этим диапазоном при масштабировании мышью и сенсорным увеличением. Мой пример ниже — установить масштабирование при событии щелчка

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