我正在尝试在pdf文件上绘制矩形。当我在pdf中绘制矩形时,矩形无法正确绘制。
我想一次只绘制一个矩形,当我绘制新矩形时,应该删除旧矩形,但是不会发生。
这是我的代码:-
pdf的渲染代码(渲染正常工作)
function pdfFile (file) {
pdfjsLib.workerSrc = 'pdf.worker.js';
pdfjsLib.getDocument(file).promise.then(function(pdfDoc) {
pdf = pdfDoc;
document.getElementById('page_count').textContent = pdfDoc.numPages;
showButtonGroup(pdf);
renderPage(pageNum);
});
}
function renderPage(num) {
pageRendering = true;
pdf.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
鼠标移动功能无法正常工作
function mouseMove(e) {
if (drag) {
ctx.putImageData(pdfPages[pageNum], 0, 0);
ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
rect.w = ((e.pageX - x) - this.offsetLeft) - rect.startX;
rect.h = ((e.pageY - y) - this.offsetTop) - rect.startY;
ctx.strokeStyle = color;
ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
Object.assign(data, {
x: rect.startX,
y: rect.startY,
w: rect.w,
h: rect.h
})
console.log(data);
}
}
注
谢谢,
Vikram
[请检查以下内容,在创建新矩形之前需要清除现有矩形
function renderPage(num) {
pageRendering = true;
pdf.getPage(num).then(function (page) {
var viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
pageRendering = false;
//You need to clear the existing rectangle
pdfPages[num] = ctx.getImageData(0, 0, canvas.width, canvas.height);
//Now you can draw new rectangle
drawRectangle(10, 10, 100, 50);
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
function drawRectangle(x, y, w, h) {
ctx.strokeStyle = color;
ctx.strokeRect(x, y, w, h);
}