如何提升PDFJS LIB实现的PDF鼠标滚轮缩放灵敏度？

要提升每步滚轮滚动的缩放幅度，核心是调整Panzoom库的滚轮缩放系数。当前代码中Panzoom使用默认的wheelZoomFactor（默认值通常为0.1），该参数决定了单次滚轮滚动对应的缩放比例，调大数值即可提高灵敏度。

修改步骤 #

在初始化Panzoom的代码中，添加wheelZoomFactor配置项，设置一个大于默认值的数值（示例用0.2，可根据实际需求调整）：

// 原初始化代码
// var panzoom = Panzoom(container)

// 修改后的初始化代码
var panzoom = Panzoom(container, {
  wheelZoomFactor: 0.2 // 数值越大，单步滚轮缩放幅度越大
})

完整修改后的代码 #

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="div-container">
  <canvas id="the-canvas"></canvas>
</div>

CSS

#the-canvas {
  direction: ltr;
  transform-origin: top left;
}
#div-container {
  width: 400px;
  height: 400px;
}

JavaScript

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var PDFRenderingInProgress = false
var pdfDoc = null
var canvas = document.getElementById('the-canvas')
var ctx = canvas.getContext('2d');
var container = document.getElementById("div-container")

var url = 'https://cdn.filestackcontent.com/mzwDIs6RTbiWZkxscEXL';


var wheelTimeoutHandler = null;
var wheelTimeout = 250 //ms

function renderPage(scale) {
    pdfDoc.getPage(1).then(function(page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        if (!PDFRenderingInProgress) {
            PDFRenderingInProgress = true
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function() {
                PDFRenderingInProgress = false
            })
        }
  });
}

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

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(1);
});

// 调整滚轮缩放灵敏度的核心配置
var panzoom = Panzoom(container, {
  wheelZoomFactor: 0.2
})
container.parentElement.addEventListener('wheel', zoomWithWheel)

补充说明 #

• wheelZoomFactor无严格取值限制，通常在0.05~0.3区间调整即可，数值越大，单次滚轮滚动触发的缩放幅度越明显。
• 若仍觉得灵敏度不足，可继续增大该数值（如设置为0.3），直到符合使用需求。

内容的提问来源于stack exchange，提问作者Buzz Su