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.mzph.cn/news/903351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法笔记.kruskal算法求最小生成树

题目&#xff1a;&#xff08;来源&#xff1a;AcWing&#xff09; 给定一个 n 个点 m 条边的无向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 求最小生成树的树边权重之和&#xff0c;如果最小生成树不存在则输出 impossible。 给定一张边带权的无向…

C#开发的自定义Panel滚动分页控件 - 开源研究系列文章

前些时候因为想拥有一个自己的软件快捷打开软件&#xff0c;于是参考Windows 11的开始菜单&#xff0c;进行了编写这个应用软件&#xff0c;里面有一个功能就是对显示的Panel里的应用对象的分页功能&#xff0c;于是就想写一个对Panel的自定义滚动条控件。 下面开始介绍此控件的…

【基础篇】prometheus命令行参数详解

文章目录 本篇内容讲解命令行参数详解 本篇内容讲解 prometheus高频修改命令行参数详解 命令行参数详解 在页面的/页面上能看到所有的命令行参数&#xff0c;如图所示&#xff1a; 使用shell命令查看 # ./prometheus --help usage: prometheus [<flags>]The Promethe…

深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南

引言 在现代Web开发中&#xff0c;CSS3已经成为构建响应式、美观且高性能网站的核心技术。它不仅提供了更强大的布局系统&#xff08;Flexbox和Grid&#xff09;&#xff0c;还引入了令人惊艳的动画效果和精准的媒体查询能力。本文将深入探讨这些关键技术&#xff0c;帮助您提…

从线性到非线性:简单聊聊神经网络的常见三大激活函数

大家好&#xff0c;我是沛哥儿&#xff0c;我们今天一起来学习下神经网络的三个常用的激活函数。 引言&#xff1a;什么是激活函数 激活函数是神经网络中非常重要的组成部分&#xff0c;它引入了非线性因素&#xff0c;使得神经网络能够学习和表示复杂的函数关系。 在神经网络…

2025上海车展 | 移远通信重磅发布AR脚踢毫米波雷达,重新定义“无接触交互”尾门

4月25日&#xff0c;在2025上海国际汽车工业展览会期间&#xff0c;全球领先的物联网和车联网整体解决方案供应商移远通信宣布&#xff0c;其全新AR脚踢毫米波雷达RD7702AC正式发布。 该产品专为汽车尾门“无接触交互”设计&#xff0c;基于先进的毫米波技术&#xff0c;融合AR…

深度学习:迁移学习

迁移学习 标题1.什么是迁移学习 迁移学习(Transfer Learning)是一种机器学习方法&#xff0c;就是把为任务 A 开发 的模型作为初始点&#xff0c;重新使用在为任务 B 开发模型的过程中。迁移学习是通过 从已学习的相关任务中转移知识来改进学习的新任务&#xff0c;虽然大多数…

Rabbitmq下载和安装(Windows系统,百度网盘)

一.下载安装Erlang 1.百度云下载 链接&#xff1a;https://pan.baidu.com/s/1k_U25KKngEf1iXWD1ANOeg 提取码&#xff1a;8ilc 2.安装 傻瓜式安装 直接下一步 选择自己要安装的路径 3.配置环境变量 增加变量名为&#xff1a;ERLANG_HOME 变量值填写自己的安装路径&#x…

(一)Linux的历史与环境搭建

【知识预告】 Linux背景介绍Linux操作系统特性Linux的应用场景Linux的发行版本搭建Linux环境 1 Linux背景介绍 1.1 什么是Linux&#xff1f; Linux是一种自由、开源的操作系统。严格来说&#xff0c;它是基于类Unix设计思想&#xff0c;旨在为用户提供稳定、安全、高效的计…

光流法:从传统方法到深度学习方法

1 光流法简介 光流&#xff08;Optical Flow&#xff09;是指图像中像素灰度值随时间的变化而产生的运动场。 简单来说&#xff0c;它描述了图像中每个像素点的运动速度和方向。 光流法是一种通过分析图像序列中像素灰度值来计算光流的方法。对于图像数据计算出来的光流是一个二…

解决ssh拉取服务器数据,要多次输入密码的问题

问题在于&#xff0c;每次循环调用 rsync 都是新开一个连接&#xff0c;所以每次都需要输入一次密码。为了只输入一次密码&#xff0c;有以下几种方式可以解决&#xff1a; ✅ 推荐方案&#xff1a;设置 SSH 免密登录 最稳最安全的方式是&#xff1a;配置 SSH 免密登录&#x…

web技术与Nginx网站服务

目录 一. web基础 1. 域名概念 2. Hosts 文件 3. DNS 4. 域名注册 5. 网页与 HTML 二. 网页概述 1. HTML 概述 2. HTML 基本标签 3. 网站和主页 三. 静态网页与动态网页 1. 静态网页 2. 动态网页 3. 动态网页语言 四. HTTP 协议 1. HTTP 协议概述 2. HTTP …

信创系统资产清单采集脚本:主机名+IP+MAC 一键生成 CSV

原文链接&#xff1a;信创系统资产清单采集脚本&#xff1a;主机名IPMAC 一键生成 CSV Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在信创终端操作系统上自动批量采集主机名、IP 和 MAC 并导出为 CSV 表格的实战文章&#xff01;本方案使用 sshpass 和 Bash 脚本…

【dify+docker安装教程】

目录 一、dify安装包下载 二、运行环境配置 1、下载docker 2、安装 2.1 新建文件夹 2.2 安装 2.3 命令安装 3.下载完成后需要重启电脑&#xff0c;注意保存文档&#xff01;&#xff01;注意保存&#xff01;&#xff01;注意&#xff01;&#xff01;&#xff08;血的教…

HTML 地理定位(Geolocation)教程

HTML 地理定位(Geolocation)教程 简介 HTML5 的 Geolocation API 允许网页应用获取用户的地理位置信息。这个功能可用于提供基于位置的服务&#xff0c;如导航、本地搜索、天气预报等。本教程将详细介绍如何在网页中实现地理定位功能。 工作原理 浏览器可以通过多种方式确定…

协作开发攻略:Git全面使用指南 — 引言

协作开发攻略&#xff1a;Git全面使用指南 — 引言 Git 是一种分布式版本控制系统&#xff0c;用于跟踪文件和目录的变更。它能帮助开发者有效管理代码版本&#xff0c;支持多人协作开发&#xff0c;方便代码合并与冲突解决&#xff0c;广泛应用于软件开发领域。 文中内容仅限技…

毕业设计-基于预训练语言模型与深度神经网络的Web入侵检测系统

项目技术说明 基于预训练语言模型与深度神经网络的Web入侵检测系统&#xff0c;通过预训练模型CodeBert分词&#xff0c;将分词输入给BiGRU的深度学习模型训练。通过sniff函数实时捕获http流量信息&#xff0c;将流量信息输入给模型进行检测&#xff0c;模型可以检测的类别有S…

[计算机科学#4]:二进制如何塑造数字世界(0和1的力量)

【核知坊】&#xff1a;释放青春想象&#xff0c;码动全新视野。 我们希望使用精简的信息传达知识的骨架&#xff0c;启发创造者开启创造之路&#xff01;&#xff01;&#xff01; 内容摘要&#xff1a; 二进制是计算机世界的基石&#xff0c;数学是世界的…

JUC中各种锁机制的应用和原理及死锁问题定位

JUC中各种锁机制的应用和原理及死锁问题定位 在互联网大厂Java求职者的面试中&#xff0c;经常会被问到关于JUC&#xff08;Java Util Concurrency&#xff09;中的各种锁机制及其应用和原理的问题。本文通过一个故事场景来展示这些问题的实际解决方案。 第一轮提问 面试官&…

配置Ubuntu18.04中的Qt Creator为中文(图文详解)

配置Qt Creator为中文 1、前言2、先设置Ubuntu系统语言为中文3、配置Qt Creator中文环境2.1 IBus输入法&#xff08;方法一&#xff09;2.2、测试IBus输入法2.21IBus输入法终端中测试2.2.2IBus输入法Qt Creator中测试 2.3、Fcitx输入法&#xff08;方法二&#xff09;2.3.1安装…