当前位置: 首页 > 工具软件 > hammer > 使用案例 >

hammer处理双指缩放问题

夏法
2023-12-01

pinchstart,pinchmove和pinchend使用

initHammer() {
      // PDF伸缩事件绑定的入口

      const vm = this;
      const instHammer = new Hammer($(document).eq(0).get(0))

      instHammer.get('pinch').set({ enable: true });

      instHammer.on('pinchstart', function (ev) {

        if (ev.pointers.length != 2) {
          return;
        }

        //处理移动
        var left = $("#pdfContainter").position().left;
        var top = $("#pdfContainter").position().top;
        vm.moveStartPosition = { 'left': left, 'top': top, 'x': ev.center.x, 'y': ev.center.y };

        //处理缩放
        let point1 = ev.pointers[0];
        let point2 = ev.pointers[1];

        let xLent = Math.abs(point2.pageX - point1.pageX);
        let yLent = Math.abs(point2.pageY - point1.pageY);

        vm.touchDistance = vm._getDistance(xLent, yLent);

        vm.scaleCenter = ev.center;

        let mydiv = document.getElementById('pdfContainter')
        var rect = mydiv.getBoundingClientRect();

        vm.scaleCenter.x = vm.scaleCenter.x - rect.left;
        vm.scaleCenter.y = vm.scaleCenter.y - rect.top;

        vm.scaletext = ev.center.x + " " + ev.center.y;
      });
      instHammer.on('pinchmove', function (ev) {

        // ev.preventDefault();  

        if (ev.pointers.length != 2)
          return

        //处理移动
        let left = vm.moveStartPosition.left + (ev.center.x - vm.moveStartPosition.x);
        let top = vm.moveStartPosition.top + (ev.center.y - vm.moveStartPosition.y);
        $("#pdfContainter").css({ 'left': left + "px", 'top': top + 'px' });

        //处理缩放
        let point1 = ev.pointers[0];
        var point2 = ev.pointers[1];

        let xLent = Math.abs(point2.pageX - point1.pageX);
        let yLent = Math.abs(point2.pageY - point1.pageY);

        let touchDistanceX = vm._getDistance(xLent, yLent);

        if (vm.touchDistance) {

          let pinchScale = touchDistanceX / vm.touchDistance;

          //vm.scaletext = vm.scaleCenter.x + " " + vm.scaleCenter.y;

          $('#pdfContainter').css({
            'transform': `scale(${pinchScale},${pinchScale})`,
            'transform-origin': `${vm.scaleCenter.x}px ${vm.scaleCenter.y}px`
          })

          vm.scale = pinchScale;
        }
      });
      //pinchend  panend
      instHammer.on('pinchend', function (ev) {

        // ev.preventDefault();

        let mydiv = document.getElementById('pdfContainter')
        var rect = mydiv.getBoundingClientRect();

        let parentdiv = document.getElementById('cpdf')
        var parentRect = parentdiv.getBoundingClientRect();

        $("#pdfContainter").css({
          'width': rect.width + 'px',
          'height': rect.height + 'px',
          'left': rect.left - parentRect.left + 'px',
          'top': rect.top - parentRect.top + 'px',
        });

        $('#pdfContainter').css({
          'transform': `scale(1,1)`,
          'transformOrigin': '0 0'
        })

        const $canvasBg = $('.canvasBg');
        if ($canvasBg.length > 0) {
          $canvasBg.remove()
        }

        vm.renderPage(vm.scale)

        return
      });
    }
 类似资料: