Javascript 在画布上平移使用pdf.js呈现的pdf文件时出现问题?
我正在使用pdf.js在画布上呈现pdf文件。如何在画布上平移pdf?我正在尝试一些平移代码,但chrome因此崩溃。相同的平移代码适用于图像 让我知道我哪里出错了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
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变量,并在鼠标移动时设置它们的值,并使用它们来转换上下文。如果我想清楚为什么我必须这样做,我会发布一个完整的答案。