当前位置: 首页 > ai >正文

pdf.js移动端预览PDF文件时,支持双指缩放

在viewer.html中添加手势缩放代码

<script>// alert("Hello World");let agent = navigator.userAgent.toLowerCase();// if (!agent.includes("iphone")) {let pinchZoomEnabled = false;function enablePinchZoom(pdfViewer) {let startX = 0, startY = 0;let initialPinchDistance = 0;let pinchScale = 1;const viewer = document.getElementById("viewer");const container = document.getElementById("viewerContainer");const reset = () => {startX = startY = initialPinchDistance = 0;pinchScale = 1;};// Prevent native iOS page zoom// document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });document.addEventListener("touchstart", (e) => {if (e.touches.length > 1) {startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;initialPinchDistance = Math.hypot(e.touches[1].pageX - e.touches[0].pageX,e.touches[1].pageY - e.touches[0].pageY);} else {initialPinchDistance = 0;}});document.addEventListener("touchmove",(e) => {if (initialPinchDistance <= 0 || e.touches.length < 2) {return;}if (e.scale !== 1) {e.preventDefault();}const pinchDistance = Math.hypot(e.touches[1].pageX - e.touches[0].pageX,e.touches[1].pageY - e.touches[0].pageY);const originX = startX + container.scrollLeft;const originY = startY + container.scrollTop;pinchScale = pinchDistance / initialPinchDistance;viewer.style.transform = `scale(${pinchScale})`;viewer.style.transformOrigin = `${originX}px ${originY}px`;},{ passive: false });document.addEventListener("touchend", (e) => {if (initialPinchDistance <= 0) {return;}viewer.style.transform = `none`;viewer.style.transformOrigin = `unset`;PDFViewerApplication.pdfViewer.currentScale *= pinchScale;const rect = container.getBoundingClientRect();const dx = startX - rect.left;const dy = startY - rect.top;container.scrollLeft += dx * (pinchScale - 1);container.scrollTop += dy * (pinchScale - 1);reset();});}document.addEventListener("DOMContentLoaded", () => {if (!pinchZoomEnabled) {pinchZoomEnabled = true;enablePinchZoom();}});</script>
http://www.xdnf.cn/news/2559.html

相关文章:

  • uniapp实现统一添加后端请求Header方法
  • .NET8配置组件
  • Google Earth Engine 中地形晕渲图(Hillshade)的实现与应用
  • Java SE(4)——方法详解
  • Rust 学习笔记:关于切片的两个练习题
  • 复现:Mamba-UNet:降水临近预报的创新解决方案
  • LBS服务(基于位置的服务)与LLM(大型语言模型)交互功能分析
  • Vue+Echarts 3D地图效果
  • 配置扩展ACL
  • 前端连接websocket服务报错 Unexpected response code: 301
  • GTC2025全球流量大会:领驭科技以AI云端之力,助力中国企业出海破浪前行
  • Typecho博客使用阿里云cdn和oss:handsome主题进阶版
  • Vue 中局部指令(directives)的用法详解
  • STM32 RTC配置
  • JavaScript 中的类(Class)语法
  • Vue 组件通信方式总览
  • OpenCV 图形API(70)图像与通道拼接函数-----创建一个图像或矩阵(GMat)的副本的操作函数copy()
  • Maven多模块工程版本管理:flatten-maven-plugin扁平化POM
  • 打火机检测数据集VOC+YOLO格式925张1类别
  • 使用POI和EasyExcel使用导入
  • 实战指南:搭建AIRIOT全场景智慧养老管理平台系统全流程解析
  • 2025系统架构师---基于规则的系统架构风格‌
  • 【硬件系统架构】哈佛架构
  • Linux 内核网络协议栈中的关键数据结构:inet_skb_parm 与 ip_options
  • 媒体查询使用
  • 《Go 语言高并发爬虫开发:淘宝商品 API 实时采集与 ETL 数据处理管道》
  • 无刷空心杯电机及机器人灵巧手的技术解析与发展趋势
  • 关系型数据库的SQL语句
  • Paramiko 完全指南
  • 2. 第一个网页:前端基础入门