如何用pdf.js实现鼠标滚轮缩放功能？

Question

pdf.js 似乎是一个强大但糟糕的文档工具。你们中的任何人都知道如何使用它创建缩放功能吗？我尝试了一些东西，但它没有按预期工作。这是一个小提琴：http://jsfiddle.net/oeaLzavn/2/

这是代码：

HTML：

<div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>

CSS：

canvas{
    width: 500px;
    /* overflow: scroll; //didn't help */
}

javascript：

//jQuery and pdf.js needed
$(document).ready(function () {

    var url = "http://cdn.mozilla.net/pdfjs/tracemonkey.pdf";

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

    function renderPage(num, scale) {
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            page.render(renderContext);
        });
    }

    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
        pdfDoc = _pdfDoc;
        renderPage(pageNum, scale);
    });

    if (canvas.addEventListener) {
        // IE9, Chrome, Safari, Opera
        canvas.addEventListener("mousewheel", MouseWheelHandler, false);
        // Firefox
        canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    }
    // IE 6/7/8
    else canvas.attachEvent("onmousewheel", MouseWheelHandler);

    function MouseWheelHandler(e) {
        var e = window.event || e;
        console.log(e);
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        console.log(delta);
        if (delta == 1) {
            scale = scale + 0.2;
        }
        else {
            scale = scale - 0.2;
        }
        renderPage(pageNum, scale);
    }

}); 

缩放参数是否错误？或者它只是一个CSS的东西？有什么想法吗？

Answer 1

您当前将画布的宽度设置为 500 像素，这意味着它的宽度始终为 500 像素。如果您删除 width 属性，它将按预期缩放。

您可以使用overflow:scroll 在父容器上添加宽度和高度属性，以便用户可以在缩放后的画布标签中移动。

.container {
    width: 500px;
    height: 500px;
    overflow: scroll; 
}
canvas{
    min-width: 10px;
    min-height: 10px;
}

JSfiddle fork