Javascript 在画布上平移使用pdf.js呈现的pdf文件时出现问题?

Javascript 在画布上平移使用pdf.js呈现的pdf文件时出现问题?,javascript,html,canvas,3d,2d,Javascript,Html,Canvas,3d,2d,我正在使用pdf.js在画布上呈现pdf文件。如何在画布上平移pdf?我正在尝试一些平移代码,但chrome因此崩溃。相同的平移代码适用于图像 让我知道我哪里出错了 var scale = 1; var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); function pdfCanvas(scale){ PDFJS.getDocument('g

我正在使用pdf.js在画布上呈现pdf文件。如何在画布上平移pdf?我正在尝试一些平移代码,但chrome因此崩溃。相同的平移代码适用于图像

让我知道我哪里出错了

var scale = 1;
 var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
function pdfCanvas(scale){

    PDFJS.getDocument('gkhead.pdf').then(function(pdf) {
      // Using promise to fetch the page
      pdf.getPage(1).then(function(page) {
       // var scale = 1.5;
        var viewport = page.getViewport(scale);

        //
        // Prepare canvas using PDF page dimensions
        //

        //canvas.height = viewport.height;
            canvas.height = 800;
        //canvas.width = viewport.width;
            canvas.width = 800;
            context.globalAlpha = 0.5;  


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


        page.render(renderContext);
        context.restore();  


      });
    });
}
正在尝试以下平移代码:

var isDown = false;
        var startCoords = [];
        var last = [0, 0];

        canvas.onmousedown = function(e) {
            isDown = true;

            startCoords = [
                e.offsetX - last[0],
                e.offsetY - last[1]
           ];
        };

        canvas.onmouseup   = function(e) {
            isDown = false;

            last = [
                e.offsetX - startCoords[0], // set last coordinates
                e.offsetY - startCoords[1]
            ];
        };

        canvas.onmousemove = function(e)
        {
            if(!isDown) return;

            var x = e.offsetX;
            var y = e.offsetY;
            context.setTransform(1, 0, 0, 1,
                             x - startCoords[0], y - startCoords[1]);
            pdfCanvas(scale)
        }   

建议您使用以下插件


您只需创建一个视口(例如div)并定义比画布小的宽度和高度

您也可以使用“手动工具”,它可以


我按原样尝试了您的代码,但没有成功。问题似乎是在
上下文
对象上调用
setTransform
。无论出于什么原因,它似乎没有应用转换,即使我对最后两个参数使用硬编码数字。相反,我创建了一个panX和panY变量,并在鼠标移动时设置它们的值,并使用它们来转换上下文。如果我想清楚为什么我必须这样做,我会发布一个完整的答案。