1

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だけですか？何か案は？

4

1 に答える 1

1

現在、キャンバスの幅を 500px に設定しています。つまり、常に 500px の幅になります。width プロパティを削除すると、期待どおりにスケーリングされます。

親コンテナーにオーバーフロー:スクロールを使用して幅と高さのプロパティを追加すると、ユーザーは拡大縮小されたキャンバス タグ内を移動できます。

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

JSfiddle フォーク

于 2015-01-21T15:54:18.210 に答える