CODEWITHSUNDEEP
javascriptpdfzoomingpdf.js
user2718671
user2718671

Reputation: 2976

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

pdf.js seems to be a mighty but lousy documented tool. Anyone of you knows how to create a zoom function with it? I tried something but it doesn't work as expected. Here is a fiddle: http://jsfiddle.net/oeaLzavn/2/

This is the code:

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);
    }

});

Is scale the wrong parameter? Or is it just a css thing? Any ideas?

Upvotes: 1

Views: 3167

Answers (1)

beije
beije

Reputation: 861

You're currently setting the width to 500px of the canvas, which means that it'll always have a width of 500px. If you remove the width property it'll scale as expected.

You could add a width and height property on the parent container with overflow:scroll, so the user can move around the scaled canvas tag.

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

JSfiddle fork

Upvotes: 1

Related Questions