pdf.js如何释放鼠标滚轮缩放功能？

Question

pdf.js 似乎是一个强大但糟糕的文档化工具。你们有人知道如何用它创建缩放功能吗？我尝试了一些东西，但它没有按预期工作。这是一个fiddle：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);
    }

});

scale 参数有误吗？或者它只是一个 css 的东西？有什么想法吗？

Answer 1

您当前将 canvas 的宽度设置为 500px，这意味着它将始终具有 500px 的宽度。如果您删除宽度属性，它将按预期缩放。

您可以使用 overflow:scroll 在父容器上添加宽度和高度属性，这样用户就可以在缩放的 canvas 标签周围移动。

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

JSfiddle fork

pdf.js如何释放鼠标滚轮缩放功能？

How to realise a mousewheel zoom function with pdf.js?

javascript

pdf

zooming

pdf.js