平移缩放 PDF (Javascript)答案

【问题标题】：Pan-zoom a PDF (Javascript)平移缩放 PDF (Javascript)
【发布时间】：2022-01-22 11:45:10
【问题描述】：

我正在尝试用鼠标对包含 PDF 文档的

进行平移缩放。我正在使用 PDF.js 和 panzoom 库（但欢迎使用其他可行的替代方案）

下面的sn-p基本上是做这个任务的，可惜

平移之后，PDF没有重新渲染，然后它的图像就变得模糊了（用鼠标平移PDF，用鼠标缩放-车轮）：

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>

<div id="panzoom-container">
  <canvas id="the-canvas"></canvas>
</div>

<style>
#the-canvas {
  border: 1px solid black;
  direction: ltr;
}
</style>

JAVASCRIPT

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

var container = document.getElementById("panzoom-container")

function renderPage(desiredHeight) {
  pdfDoc.getPage(1).then(function(page) {
    var viewport = page.getViewport({ scale: 1, });
    var scale = desiredHeight / viewport.height;
    var scaledViewport = page.getViewport({ scale: scale, });
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport
    };
    page.render(renderContext);
  });
}

// Get the PDF
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
  // Initial/first page rendering
  renderPage(250);
});

var panzoom = Panzoom(container, {
  setTransform: (container, { scale, x, y }) => {
    // here I can re-render the page, but I don't know how
    // renderPage(container.getBoundingClientRect().height);
    panzoom.setStyle('transform', `scale(${scale}) translate(${x}px, ${y}px)`)
  }
})

container.addEventListener('wheel', zoomWithWheel)

function zoomWithWheel(event) {
  panzoom.zoomWithWheel(event)
}

https://jsfiddle.net/9rkh7o0e/5/

我认为程序是正确的，但不幸的是我陷入了两个必须解决的问题（然后我请求您的帮助）：

我不知道如何在 panzoom 发生后正确重新渲染 PDF。
必须对连续的渲染进行排队以使其正常工作（这样 PDF 在平移时不会闪烁）我怎样才能修复 1 和 2 ？除了 panzoom 库之外，我找不到任何可以在 PDF 上执行此操作的工具。

谢谢

【问题讨论】：

标签： javascript pdf pdf.js pan

【解决方案1】：

经过几天的尝试，我解决了这个问题。棘手的部分是在容器缩放后缩小包含的画布，并设置 transform-origin CSS 属性：

canvas.style.transform = "scale("+1/panzoom.getScale()+")"

这是一个可以平移缩放的 PDF。每个新的渲染都是在一个小的延迟（这里设置为 250 毫秒）之后完成的，这对应于一种“车轮停止事件”。

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);
    wheelTimeoutHandler = setTimeout(function() {
        canvas.style.transform = "scale("+1/panzoom.getScale()+")"
        if (pdfDoc)
            renderPage(panzoom.getScale());
    }, wheelTimeout)
}

https://jsfiddle.net/7tmk0z42/

【讨论】：