pdf.js 🚀 - 在手机上使用更自然的缩放

这是我们想要做的，但是对于V1来说，缩放时出现问题，因此我们不得不使用缩放按钮。

brendandahl 于 2013-01-18

您能详细说明这些问题吗？我认为我们可以为您确定优先顺序，以使PDF.js正常运行。

snorp 于 2013-01-18

在这种情况下，我真的不希望您希望浏览器进行缩放。如果pdf.js以800x600的分辨率渲染文档，而您捏放大，则浏览器将继续以更高的高分辨率渲染800x600的内容，这取决于设备的分辨率和方式，可能看起来像废话。您放大了很多。（我假设pdf.js仍然使用canvas进行渲染而不是svg？）

wesj 于 2013-02-04

@Snuffleupagus @timvandermeij你们中https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

brendandahl 于 2013-09-17

@brendandahl我一定会把它放在我的待办事项清单上，并尽快开始尝试。 https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15似乎是一个很好的例子，因为“转换”用于2指捏事件。如果捏合缩放能够正常工作，那将是非常不错的，因为它在移动设备上已经很普遍了。

timvandermeij 于 2013-09-17

我正在为此。有兴趣的用户可以关注https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom以获得进度。它已经在我的平板电脑和手机上捕获了pinch-to-zoom命令，但是必须提高准确性以及实际的重新渲染（我需要找到一种方法来计算使用旧比例尺的新比例尺以及新的中间点）。

timvandermeij 于 2013-09-18

@timvandermeij在实现此功能之前，我们可能需要做的一件事就是提高缩放比例。我们已经讨论过，首先只是使用css变换来缩放画布，然后开始重新渲染，然后在完成重新渲染后显示新画布。

brendandahl 于 2013-09-18

我坚信，这里最好的解决方案将是依靠浏览器的合成器进行瞬时缩放（捏或双击时的动画），然后让pdf.js重新绘制为新分辨率。可悲的是，现在内容忽略了缩放更改，并且我认为将画布的大小调整为新的分辨率是行不通的。我们可能需要增强画布规格以处理此问题。

snorp 于 2013-09-19

我在Hammer.js上取得了一些成功。我允许浏览器进行“本机”缩放（这会导致PDF模糊），并在捏合后重新绘制PDF画布，比例为scale = scale * zoom，并为画布提供css“ transform：scale（1 / zoom）”。因此所有内容都将放在同一位置（尤其是文本和锚点）。看起来很整洁。

skruse 于 2013-12-11

👍3

@skruse我为

timvandermeij 于 2013-12-11

嘿，skruse，如何在变焦结束时计算变焦倍数？

rodoabad 于 2013-12-19

var zoom = document.documentElement.clientWidth / window.innerWidth;

我也遇到了性能问题：就“比例”参数而言，不应将移动设备的“缩放范围”过大。我猜2或3是最大的。

skruse 于 2013-12-19

+2

sasikanth513 于 2015-09-07

有人为这个2岁的问题找到了解决方案吗？

MickL 于 2015-11-19

据我所知，对此还没有做任何事情。我在https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908中引用了我之前的评论。一旦有有效的代码，我们邀请任何人为此提交PR。

timvandermeij 于 2015-11-19

很想看到一个解决方案。目前，这是阻止我使用pdf.js的唯一方法

:(

rorysmorris 于 2016-03-10

👍3

捏变倍会很棒！我发现这个使用pdf.js并具有缩放和滑动页面的jQuery插件。 http://touchpdf.net/demo/index.htm但是，如果它是从一开始就在pdf.js中构建的，那就太好了：-)

Manmade 于 2016-03-20

+1很想在这里看到这个。

ltullman 于 2016-08-04

+1，其他使用Hammer.js捕获事件然后调用pdf.js缩放函数的示例是否不是相对“干净”的方法？

sporkman 于 2016-10-05

@sporkman最后我要做的是渲染画布很大，然后使用本机浏览器缩放以允许缩放（我的应用程序是为触摸设备设计的）。如果需要，我可以共享源。

rorysmorris 于 2016-10-05

@rorysmorris在滚动时捏捏时如何设法禁用本机浏览器缩放？我也在pdf.js上实现了Hammer.js，但无法解决该特定问题

toplay3 于 2016-10-05

您是否尝试过使用touch-action CSS属性？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

在2016年10月5日下午3:15，“ toplay3” [email protected]写道：

@rorysmorris https://github.com/rorysmorris您如何设法获得
滚动时捏时禁用本机浏览器缩放？我有
还在pdf.js上实现了Hammer.js，但无法解决该特定问题
问题
-
您收到此消息是因为您已订阅此线程。
直接回复此电子邮件，在GitHub上查看
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785，
或使线程静音
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
。

Rob--W 于 2016-10-05

❤1

@ Rob--W
天才！现在工作完美！非常感谢！

toplay3 于 2016-10-05

该问题计划什么时候实施？自最初发布此问题以来已经有一段时间了。不用说+1！

anik786 于 2016-10-14

自一年以来，我还每周检查一次此问题。将其包含在核心中或作为Hammer js的附加组件将是很棒的。

MickL 于 2016-10-14

为了使该线程更具建设性，这里是UI的要求（如果有人想真正地帮助并加快问题的解决速度），而PDF.js则没有特定要求：

缩放和平移垂直堆叠的DIV（大小不同）集
不允许用户迷失在不同比例的视口中
检测并通知div可见度或可见比例变化的时间。

后者很重要，因为我们不希望在低功耗设备上以最大分辨率绘制所有页面。如果有人将拥有原型，请在IRC上找到我，我将帮助挂钩PDFPageView以获得可见性和缩放事件。我还要设置5-good-beginner-bug吗？

yurydelendik 于 2016-10-14

我同意这将是一个不错的初学者错误，因此我将其标记为此类。

timvandermeij 于 2016-10-14

这不仅适用于移动设备，我还收到功能请求以支持两指触控板缩放（在Mac上）。

从我的简短调查中，我发现还没有跨浏览器的方式来支持缩放手势。

Safari有一些特定的手势事件： https :
Firefox附加代码可以访问手势事件： https :
关于将捏紧事件转换为ctrl-wheel的一些bugzilla讨论（带有输入和对其他浏览器的引用）： https :

Rob--W 于 2016-10-18

👍1

+1

Goldenflamer 于 2016-10-25

👍1

@ toplay3和@ Rob--W为了使其正常工作，您做了什么？是否添加了“触摸动作：自动；”？要什么你还做什么？谢谢！

Manmade 于 2016-10-26

大家好，像你们中的大多数人一样，我有兴趣进行缩放工作，有没有人能够做到这一点？如果成功，设置是什么？ @rorysmorris @ toplay3 @ Rob--W谢谢

squallstar 于 2016-11-30

👍

kosssi 于 2016-11-30

@rorysmorris关于以上问题有什么建议吗？谢谢：）

squallstar 于 2016-12-01

@squallstar ，您好-最初，我尝试使用JS缩放和缩放库来为我处理此问题，但发现了一些问题。它没有缩放我想要的大小，也就是说，当我从不希望边缘远离屏幕边缘时，它将使PDF画布完全脱离屏幕，如果可以的话。最后，我只是使用了内置在移动浏览器中的本地缩放功能来进行捏/缩放/导航。我设置PDF.js呈现在3X它被显示的像素大小的PDF，然后按比例缩小与CSS，所以它会保持相当的放大时清脆。如果您需要任何帮助，我可以告诉你的工作示例我实施。

rorysmorris 于 2016-12-01

@rorysmorris谢谢，如果您向我展示（或发送摘录）或如何实施它，将非常

squallstar 于 2016-12-01

@squallstar通过我网站上的联系表给我发送电子邮件，今天晚些时候我将给您演示：) http://rorymorris.co.uk

rorysmorris 于 2016-12-01

@squallstar这不是真正的解决方案，而是一种解决方法。缺点是：性能，结果取决于设备，缩放不是无止境的。

MickL 于 2016-12-01

与使用JavaScript执行这些任务相比，通过使用本机滚动和平移极大地提高了性能。可以使用meta视口标签轻松配置最大缩放级别，究竟谁想对光栅化图像进行无尽缩放？顺便说一下，很棒的“ JS-ImageResizer”库！ @MickL

rorysmorris 于 2016-12-01

性能更多的是猜测。可以说使用横向宽度为2208px的iPhone Plus。现在您将拥有一个6624px的画布。根据PDF的复杂性和页面数，您可能会绘制3个具有HTML文本，图形等的6000px画布。

我想您的解决方案对很多人来说都是很棒的。但是正如您所描述的，它实际上是一个伪缩放，而不是实际触发PDF.js缩放和重新渲染:)

MickL 于 2016-12-01

没错，从这个方面来说，性能方面的表现并不理想。在我的特定用例中，我必须以iPad（视网膜）大小渲染300多页的PDF，并且每个图纸顶部都需要一个绘图画布！

PDF.js会使浏览器（iOS Safari）崩溃，显示的PDF页面大约为10个，因此最后，我只必须一次显示一个PDF页面（具有上一个/下一个按钮）。不理想！我同意，PDF.js中内置的本机缩放功能会好很多。

rorysmorris 于 2016-12-01

检出kamihq.com进行缩放的示例

toplay3 于 2016-12-02

@rorysmorris我昨天晚上已通过联系表格向您发送了电子邮件，您是否有机会向我发送您正在谈论的示例？：）谢谢

squallstar 于 2016-12-02

有工作示例（@ rorysmorris ，@ Rob--W等）的任何人都可以分享吗？

ltullman 于 2016-12-13

@rorysmorris我试图通过您的网站与您联系。如果有人有一个可行的例子，可以请分享一下吗？

hetalv985 于 2017-01-26

@ltullman @ hetalv985我设法使它能够自己实施，请在此处检查我的要点：

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
只需将其粘贴到viewer.html的末尾即可。

squallstar 于 2017-01-26

👍8 🎉4

谢谢squallstar。但是我们没有使用viewer.html。我们正在div标签内的iOS移动应用程序中呈现pdf。在这种情况下，我们如何使用此功能？我们需要包括查看器文件吗？

hetalv985 于 2017-01-27

因此，我们具有非常相似的函数handleMouseWheel 。为什么不对触摸手势oder Hammer js使用完全相同的功能？这不是在1-2小时内解决的吗？

MickL 于 2017-03-20

不幸的是，这并不容易。请参阅我以前的评论，网址为

timvandermeij 于 2017-03-20

如果那是唯一的问题... :)

我还注意到，在“ Ctrl +鼠标滚轮”上，它滚动到光标位置，就像在Google地图上一样。但是，如果没有滚动条（这是页面加载时的默认设置），则此方法将无效。因此，为使这种感觉自然而然，如果需要进行捏缩放和鼠标滚轮缩放，则必须创建一个填充。

如果mousewheel-zoom和pinch-zoom使用相同的功能，则是一个不错的选择。

您的提交看起来已经不错了。也许性能不再是问题，而是3年前了。当然，最好的解决方案是：开始捏->模糊缩放->结束捏->真正缩放pdf。此外， user-scalable=no不再适用于最新的iOS。因此，我们可能也需要preventDefault() 。

MickL 于 2017-03-21

我为此花了很多时间。实际上似乎有可能，但是有几个我无法解决的问题：

Hammer.js仅适用于pinchend（当pdf.js缩放时，pinchmove总是被取消）
即使我使用与mousewheel-zoom相同的方法，也无法完美滚动到pinchend的中心
有时Hammer.js无法正确设置中心
有时pinchend不会被Hammer.js调用，并且不会发生缩放
我试图在pinchmove上添加css转换（csch缩放pinchmove，pdf js缩放pinchend），这会带来出色的性能，但我又无法完美滚动（位置#viewer与CSS转换）
Hammer.js可以防止任何其他触摸操作（在我们的示例中为常规页面滚动），因此我不得不修改Hammer.js以仅在使用2个手指时阻止
（与鼠标滚轮缩放相同：）如果没有滚动条（缩小以查看整个文档），我们将无法将文档定位（滚动）到捏合的中心。

所有这些可能都可以解决，但是iOS 10允许页面缩放，即使使用user-scalable=no禁用了页面缩放。因此，在几次捏上preventDefault（）无法正常工作，并且整个页面都被缩放了。这将对最终用户造成重大问题（唯一的退出方法是双击工具栏）。

MickL 于 2017-03-27

👍1

@MickL我尝试了一下。通过在类pdfViewer和页面中添加CSS属性“ pointer-events：none”，我避免了“捏缩放”的取消（并且当viewerContainer调度了两次触摸事件时调用stopPropagation + preventDefault，因此整个页面不会放大iOS）。

我遇到了与您描述的问题相同的问题，即当我使用修改后的鼠标滚轮方法（传递下一个要应用的缩放比例，当前的“中间位置”或目标以及“中间位置”的增量）时，没有完美的缩放位置事件向左，向右，向上，向下移动多少，由pdfViewer.container.scrollLeft和pdfViewer.container.scrollTop管理）。似乎总是存在一个错误，可能是由于超时导致的错误，导致观看者无法在每次两次触摸事件上进行渲染。

关于在哪里应用这些CSS比例转换以避免在每个比例增量上呈现所有内容的任何提示？

betovidal 于 2017-03-29

@betovidal我知道
也许我们可以共同努力以解决问题？

buzzyboy 于 2017-08-07

👍5

@squallstar我非常简单地在iOS上测试了您的解决方案。到目前为止，它为我工作！感谢您分享您的解决方案💯

vuinguyen 于 2017-09-18

@vuinguyen谢谢！我很高兴它也为您服务;）

squallstar 于 2017-09-19

+1

sunsus 于 2017-10-30

是否希望将@squallstar的代码集成到PR中？当前，如果用户试图在移动设备上进行捏合和缩放，则他们通常被“锁定”在滚动之外，并且必须重新加载页面只是为了进一步导航。依靠微小的“ +”和“-”按钮进行导航对于2018年的移动查看器来说是违反直觉的。

prohtex 于 2018-01-22

自从iOS 10以来，Pinch-zoom在iOS上“被破坏”。即使一切都实现完美，Safari也会把一切搞砸。

MickL 于 2018-01-22

这是iOS特有的问题吗？是否可以在Android上缩放由pdfjs提供的PDF？

prohtex 于 2018-01-22

取决于浏览器。我假设只有iOS浏览器会忽略“ user-scalable = no”。

MickL 于 2018-01-22

现在，即使在移动设备上，您也必须按下加/减按钮才能缩放文档。这真的很奇怪，特别是因为捏到缩放也处于活动状态。我认为最好的移动方式是渲染“自然”尺寸，然后让浏览器控制缩放，类似于网页。

对我来说，这说明了一切。我想这与特定功能无关，而是一种移动体验的方法。

我假设只有iOS浏览器会忽略“ user-scalable = no”。

正确。

prohtex 于 2018-01-22

我看到“ Box Content Preview”（使用PDFJS显示PDF）可以很好地实现此目的。这是他们查看器的Codepen：

https://codepen.io/box-platform/pen/rmZdjm

这是他们的修复请求：

https://github.com/box/box-content-preview/pull/567

我认为也许有人可以根据他们的解决方案为PDFJS做类似的事情。我会尝试自己实现并发布代码（如果有的话）。如果其他人（可能比我有更多的经验）也可以合作尝试，我会很棒的！

amurillo17 于 2018-05-31

@ amurillo17感谢您的链接。 Box解决方案看起来很棒。我很想看到类似pdfjs的东西。请让我们了解您的进度！

prohtex 于 2018-06-01

这个问题有什么好的解决方案吗？

$tefracky picture$ tefracky 于 2018-09-02

有任何更新吗？将会是一个很棒的功能！

chrisgillis 于 2018-10-26

👍3

任何更新？谢谢

rcarretteGroupeBRIAND 于 2019-03-18

👍7

有没有简单的方法可以将此功能添加到现有查看器？

AnReZa 于 2019-04-10

👍1

有没有简单的方法可以将此功能添加到现有查看器？

没有。

prohtex 于 2019-04-10

@prohtex嗯，那真是可悲。我希望这些年来将很快添加这样的功能。

AnReZa 于 2019-04-10

@prohtex嗯，那真是可悲。我希望这些年来将很快添加这样的功能。

仅当有人加强并将代码集成到PR中时才添加（不幸的是，不是我），即使这样，它也可能需要数年时间。

prohtex 于 2019-04-10

我有一个解决方法，但是它是“仅限Android”，因为我不在乎“ Firefox for Android”插件中的iOS：
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
我的Makefile只是将其附加到“ web / viewer.js”。它注册触摸事件，并将捏合手势转换为单击按钮。

M-Reimer 于 2019-04-22

我有一个解决方法，但是它是“仅限Android”，因为我不在乎“ Firefox for Android”插件中的iOS：

它也可以在我的iPad上使用，但感觉有点呆板，而且不太自然。每次捏合后将缩放一级。因此，您必须松开手指以使其缩放，而您捏到多远的距离都没有关系。这是正常现象，还是只是特定于设备的错误？无论如何，谢谢，因为这是朝正确方向迈出的一步。

AnReZa 于 2019-04-23

它也可以在我的iPad上使用，但感觉有点呆板，而且不太自然。每次捏合后将缩放一级。因此，您必须松开手指以使其缩放，而您捏到多远的距离都没有关系。这是正常现象，还是只是特定于设备的错误？无论如何，谢谢，因为这是朝正确方向迈出的一步。

查看代码，这不是一个可行的解决方案，也不是一个好的解决方法。所有这些操作就是监视缩放事件并使用jQuery模拟单击[-] [+]按钮。

prohtex 于 2019-04-23

@prohtex确实如此。如果您尝试使用它，它可以执行某些操作，但效果并不理想。

AnReZa 于 2019-04-23

正如我所说：不完美，但总比没有好。
至少对我来说，捏手势要比在小手机屏幕上按下小缩放按钮容易。它可以使每个移动设备用户都希望使用手势。

它也可以在我的iPad上使用，但感觉有点呆板，而且不太自然。每次捏合后将缩放一级。因此，您必须松开手指以使其缩放，而您捏到多远的距离都没有关系。这是正常现象，还是只是特定于设备的错误？无论如何，谢谢，因为这是朝正确方向迈出的一步。

按下按钮。用这种简单的方法不可能实现“自然缩放”，而且我不想对PDF.js太费神。这不是我的插件的目标。

但是应该可以根据手指移动的距离多次按下按钮。我会尝试的。

查看代码，这不是一个可行的解决方案，也不是一个好的解决方法。所有这些操作就是监视缩放事件并使用jQuery模拟单击[-] [+]按钮。

我愿意提出建议，但是由于这是Addon的一部分，Addon只是想使PDF.js可以在Firefox中用作PDF查看器，因此我不会做深入的修改。

顺便说一句：我的代码中没有一行jQuery。这是原始JavaScript。

M-Reimer 于 2019-04-23

实际上，应该可以在移动手指的同时执行缩放步骤。
我将尝试做更多的改进，但我将使用的唯一通信路径是我将远程控制的两个按钮。这样，我的代码不会干扰PDF.js。

M-Reimer 于 2019-04-23

👍1

顺便说一句：我的代码中没有一行jQuery。这是原始JavaScript。

我站得住了。希望尽快找到成熟的解决方案。

prohtex 于 2019-04-23

完成此操作的方法是在捏缩放时使用css转换。另外，不仅需要缩放，还需要应用手指的移动。然后在pinz-zoom-end上，您可以重置CSS转换并应用实际的缩放并滚动到pdf.js。

PS对我来说，在非jQuery项目中使用jQuery似乎已经是一种坏习惯。

MickL 于 2019-04-23

PS对我来说，在非jQuery项目中使用jQuery似乎已经是一种坏习惯。

@ M-Reimer在哪里使用JQuery？正如他已经说过的，他的解决方法仅使用纯Javascript。

AnReZa 于 2019-04-23

是的，我不好重要的是，该解决方案不能很好地工作。

prohtex 于 2019-04-23

😕1 👍1

已更新，因此手指之间的距离更改了缩放量：
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
在移动手指时无法缩放，因为某种原因，实际的缩放和重绘会导致触摸事件以某种方式“结束”。
再次：总比不处理手势要好。

M-Reimer 于 2019-04-27

👍3

@ M-Reimer非常感谢您的工作。至少，与上一版本相比，这是一个改进。也许有人找到一种解决方案，使其在缩放时重绘。或者，可以使用css转换临时缩放，然后在触摸手势结束后最终重绘。

AnReZa 于 2019-05-07

@anvaka调查此案，似乎可能有一个相当简单的解决方案。不幸的是，我目前没有时间对其进行测试，但也许有人想尝试一下。

AnReZa 于 2019-05-15

我制作了一个基于@squallstar解决方案的版本，该版本还使用css转换在紧缩动作期间提供更多用户反馈。渲染仅在触摸端完成。它不是完美的，渲染后的滚动定位存在一些小问题，但也许有人可以将其作为开始。

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

jsprpalm 于 2019-05-23

👍4

这个问题仍然没有解决办法吗？我想在移动设备上使用pdf.js，但无法缩放，在较小的屏幕上几乎没有用。

ipartola 于 2019-10-08

我在不使用Hammer.js的情况下就使它可以工作，但是由于它是针对客户项目的，因此我无法共享代码。我实现了捏合和双击操作，并使用CSS缩放，并在pinchend上缩放了pdf.js。有些元素需要设置宽度/高度，有些可以使用css-transform进行转换。同样，在缩放pdf.js的滚动表时也必须防止viewer.js。花了我很多时间，但最终效果很好。

MickL 于 2019-10-08

这个问题仍然没有解决办法吗？我想在移动设备上使用pdf.js，但无法缩放，在较小的屏幕上几乎没有用。

在开发人员熟悉pdf.js代码库步骤以提供解决方案之前，将由实现pdf.js的每个人将某些东西拼凑在一起。对于这个项目来说，这似乎并不是优先考虑的事情。

这是可以很容易地集成的PR：

https://github.com/box/box-content-preview/pull/567

prohtex 于 2019-10-08

👍1

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

@jsprpalm谢谢您的工作非常需要修复，请其他人帮助修复

aidrouge 于 2019-10-09

👎1

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

larsneo 于 2019-11-09

👍4

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

我已经将此添加到我的PDF查看器插件中。似乎工作得很好。
https://addons.mozilla.org/android/addon/android-pdf-js/

M-Reimer 于 2019-11-10

编辑：对我有用

prohtex 于 2019-11-10

对于我来说，更自然的设置是：

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0"
    />

punisher97 于 2019-12-17

如何设置最小变焦？我可以将图像缩小很多，以至于变成一个点。

KazysNoobiys 于 2020-01-29

我和@KazysNoobiys有相同的问题。
视口上的最小比例不会影响缩放

vniehues 于 2020-07-29

我正在研究另一种解决方法：一个透明的css层，覆盖pdf.js以处理各种滑动功能。覆盖部分现在可以使用，但是我不知道要调用什么函数。
if（swipe =='left'）????
我要调用什么功能才能进入下一页或备份到上一页或缩放？

bradporter 于 2020-10-12

节省您的时间和生活，像这样编辑.html文件

// delete the 'maximum-scale'
<meta name="viewport" content="width=device-width, initial-scale=1">

例如。 https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L26

WeiFei365 于 2020-10-19

Pdf.js: 在手机上使用更自然的缩放

最有用的评论

所有95条评论

相关问题