2013-07-09 30 views
1

我使用pdf.js在畫布上呈現pdf文件。如何平移畫布上的pdf?我正在嘗試一些平移代碼,但因爲這個原因,Chrome會崩潰。用於平移的相同代碼適用於圖像。在使用pdf.js渲染的畫布上平移pdf文件的問題?

讓我知道我要去哪裏錯了。

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) 
     } 
+0

我想你的代碼,因爲它是,它並沒有成功。問題似乎是在'context'對象上調用'setTransform'。無論出於何種原因,即使我使用最後兩個參數的硬編碼數字,它似乎也不會應用該轉換。相反,我創建了一個panX和panY變量,並在鼠標移動並使用它們轉換上下文時設置它們的值。如果我認爲我必須這樣做,我會發佈一個完整的答案。 –

回答

-1

可以也可以使用「手形工具」,它只是......