我正在使用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)
}
context
对象调用setTransform
方法上。不知道为什么,即使我在最后两个参数中使用硬编码数字,它也似乎无法应用变换。相反,我创建了一个panX和panY变量,并在鼠标移动时设置它们的值,并使用它们来转换上下文。如果我弄清楚为什么要这样做,我会发布完整的答案。 - The Unknown Dev