使用pdf.js在画布中用加载的pdf文件绘制矩形 [英] Draw rectangle in canvas with loaded pdf file using pdf.js

问题描述

我正在尝试在pdf文件上绘制矩形.当我在pdf中绘制矩形时，矩形无法正确绘制.

I am trying to draw rectangle over a pdf file. When I draw rectangle in pdf, rectangle not draw properly.

我想一次只绘制一个矩形，当我绘制新矩形时，应该删除旧矩形，但是不会发生.

I want to draw only one rectangle at a time, when I draw new rectangle the old rectangle should be remove, but it is not happening.

这是我的代码:

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);
    }
}

注意

1. 当我启用clearRect和putImageData函数时，矩形将正确绘制，但是canvas pdf显示为空.这是附件图片

1. When I enable clearRect and putImageData function then rectangle draw properly but canvas pdf shows empty. Here is the attached image

仅启用clearRect功能时，然后在pdf中显示多个矩形.这是附件图片

When only enabled clearRect function then showing multiple rectangle in pdf. Here is the attached image

推荐答案

请检查以下内容，在创建新矩形之前需要清除现有矩形

Please check the below, need to clear the existing rectangle before creating new

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);
    }

这篇关于使用pdf.js在画布中用加载的pdf文件绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！