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

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>

相关文章:

  • EasyCVR视频汇聚平台助力大型生产监控项目摄像机选型与应用
  • 多模态大型模型,实现以人为中心的精细视频理解
  • Golang|分布式索引架构
  • Go 语言入门:(一) 环境安装
  • uniapp 微信小程序遇到的坑
  • 8.Three.js中的 StereoCamera 立体相机详解+示例代码
  • 鼠标获取坐标 vs 相机获取坐标
  • Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比,包含关键方法的详细说明和表格总结
  • 网工备考考纲变化总结
  • ElasticSearch深入解析(五):如何将一台电脑上的Elasticsearch服务迁移到另一台电脑上
  • 详解RabbitMQ工作模式之工作队列模式
  • 定时器的源码介绍与简单实现——多线程编程简单案例[多线程编程篇(5)]
  • Java方法执行机制与入口点实现深度解析
  • HarmonyOS SDK助力鸿蒙版今日水印相机,真实地址防护再升级
  • 第36课 常用快捷操作——用“鼠标右键”退出当前命令
  • RestRequest ,newtonsoft解析
  • 在VS2022中使用Lua与c交互(二)
  • 佛山大旺高新区3650 M5 ERP服务器维修案例
  • 服务器部署flask
  • 第十四章-PHP与HTTP协议
  • 胖东来发布和田玉、翡翠退货说明:不扣手续费等任何费用
  • 一季度全国消协组织为消费者挽回经济损失23723万元
  • 法治日报:商品明细是隐私,外卖员快递员不应知晓
  • 视频丨习近平主席专机抵达莫斯科,俄战机升空护航
  • 国务院安委会办公室印发通知:坚决防范遏制重特大事故发生
  • 长安汽车辟谣作为二级企业并入东风集团:将追究相关方责任