PDF.JS每隔一次更新一次

时间:2017-08-22 21:21:28

标签: javascript canvas html5-canvas pdf.js dom-events

我正在尝试为pfd.js查看器实现“拖动到平移”功能。

但是,这只能在其他时间使用,因此在平移之后,我必须再次单击查看器以使其重新渲染。

以下是代码:

var pdfScale = 1;
var activePdf;
var rotate = 0;
var addX = 0;
var addY = 0;

function renderPage(page) {
    activePdf = page;

    var canvas = document.getElementById('the-canvas');
    var wrapperStyle = window.getComputedStyle(document.getElementsByClassName("canvas-wrapper")[0]);
    var context = canvas.getContext('2d');

    var viewport = page.getViewport(pdfScale, rotate);
    canvas.height = parseInt(wrapperStyle.height);
    canvas.width = parseInt(wrapperStyle.width);

    viewport.viewBox[0] -= addX;
    viewport.viewBox[2] -= addX;
    viewport.viewBox[1] += addY;
    viewport.viewBox[3] += addY;

    addX = addY = 0;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };

    var renderTask = page.render(renderContext);
}

$(document).ready(function() {
    var start = [0,0];

    $('#the-canvas').mousedown(function(event) {
        start[0] = event.screenX;
        start[1] = event.screenY;
    }).mouseup(function(event) {
        console.log(event);
        addX = event.screenX - start[0];
        addY = event.screenY - start[1];
        setTimeout(function() {
            renderPage(activePdf);
        }, 500);
    });

    var url = 'http://localhost/test.pdf';

    // Disable workers to avoid yet another cross-origin issue (workers need
    // the URL of the script to be loaded, and dynamically loading a cross-origin
    // script does not work).
    PDFJS.disableWorker = true;

    // The workerSrc property shall be specified.
    PDFJS.workerSrc = 'build/pdf.worker.js';

    // Asynchronous download of PDF
    var loadingTask = PDFJS.getDocument(url);
    loadingTask.promise.then(function(pdf) {
      console.log('PDF loaded');

      // Fetch the first page
      var pageNumber = 1;
      pdf.getPage(pageNumber).then(function(page) {
        console.log('Page loaded');

        renderPage(page);
      });
    }, function (reason) {
      // PDF loading error
      console.error(reason);
    });

});

即使在添加setTimeout后,它仍然无法在第一次正确呈现。如何编辑我的逻辑以使其正常工作?

谢谢!

0 个答案:

没有答案