react-konvakonvajs-reactjs

React Konva move screen with two fingers on touchpad


I'm looking for the correct event to navigate on the canvas with two fingers on touch pad. I'm using React Konva.js and I found a good example on the site https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html The problem that I don't want to zoom in or out with the two fingers but navigate. Does anyone have a relevant example?


Solution

  • const stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
    });
    
    const layer = new Konva.Layer();
    stage.add(layer);
    
    const shape = new Konva.Circle({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radius: 50,
      fill: 'green'
    });
    layer.add(shape);
    
    stage.on('wheel', (e) => {
      const dx = -e.evt.deltaX;
      const dy = -e.evt.deltaY;
      stage.x(stage.x() + dx);
      stage.y(stage.y() + dy);
    })
    body {
      padding: 0;
      margin: 0;
    }
    <script src="https://unpkg.com/konva@^8/konva.min.js"></script>
    <div id="container"></div>