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