IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> hammer处理双指缩放问题 -> 正文阅读

[JavaScript知识库]hammer处理双指缩放问题

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
      });
    }
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-01 15:38:21  更:2022-05-01 15:39:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 4:07:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码