我正在开发电子书应用程序,我使用 PDF.js 在画布上绘制每一页,问题是,当我单击按钮并转到其他页面时,我尝试再次在同一画布上渲染,但画布似乎移动了到错误的位置或错误的大小。
function renderPage(url) {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
//clearCanvasGrid('canvas');
PDFJS.getDocument(url).then(function (pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport(5); //scale 5
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function() {
initialZoomPage(viewport.height,viewport.width);
});
});
});
}
那么,在重绘页面之前我需要做一些必要的步骤吗?另外,如果我想关闭页面,如何销毁它?谢谢
更新:
function clearCanvasGrid(canvasID){
canvas = document.getElementById(canvasID); //because we are looping //each location has its own canvas ID
context = canvas.getContext('2d');
//context.beginPath();
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING
}
我找到了一个清除画布的功能,但是除了 clearRect 之外,它还有 .save 、 .setTransform 和 .restore ,它们是必要的吗?谢谢
原文由 user782104 发布,翻译遵循 CC BY-SA 4.0 许可协议
一种方法是使用
context.clearRect(0,0, width, height)
(参考) 清除画布。或者,您可以在每次需要新页面时附加一个新的画布元素(并可能删除旧的,具体取决于您是否要再次显示它)。像这样的事情应该这样做:
请注意,如果您打算保留多个,则每个都必须有一个唯一的
id
而不仅仅是id="canvas"
(可能基于页码 - 类似于canvas-1
)。更新问题的答案:
save
、setTransform
和restore
仅在您进行(或以某种方式允许用户进行)转换时才需要。我不知道 PDF.js 库是否在幕后进行任何转换,因此最好将其留在那里。