无法在使用pdfjs呈现PDF的现有<canvas>上绘制rect

Question

任务

在您的网页画布 <canvas id="pdfCanvas"> 创建现有的帆布织物帆布 new fabric.Canvas("pdfCanvas"); 已经mouse.down,mouse.up,mouse.move方法,使绘制矩形呈现PDF在上面的帆布"pdfCanvas"现在使用的浏览器PDF.js现在显示渲染PDF在pdf上绘制矩形,它隐藏了渲染的画布,但它确实绘制了对象

问题

这里是小提琴,看问题: -运行上面https://jsfiddle.net/hiitskiran/wgz8qore/2/ -你可以看到织物矩形躲在渲染PDF的背后-点击PDF画布区域看织物对象

Answer 1

我从你的小提琴中看到的是你不等待page.render方法的结果,这是异步的,然后,不幸的是,如果你等了page.render,fabric.canvas实例将清理你以前填充的画布,我们不能做什么为了这.所以我尝试了另一种方法:首先,我等待pdf.js page.render方法,然后我调用先前填充的画布的.toDataURL,以便我可以获得旧内容的副本,然后将之前填充的画布设置为背景你的新fabric.canvas和完成绘制你的矩形.

var url = 'http://www.africau.edu/images/default/sample.pdf';
var canvas = document.getElementById('pdfcanvas');
var context = canvas.getContext('2d');
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({
      canvasContext: context,
      viewport: viewport
    }).then(function() {

      var bg = canvas.toDataURL("image/png");
      var fcanvas = new fabric.Canvas("pdfcanvas", {
        selection: false
      });
   fcanvas.setBackgroundImage(bg,fcanvas.renderAll.bind(fcanvas));
      fcanvas.setWidth(300);
      fcanvas.setHeight(300);
      var rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 50,
        height: 50,
        fill: '#FF454F',
        opacity: 0.5,
        transparentCorners: true,
        borderColor: "gray",
        cornerColor: "gray",
        cornerSize: 5
      });
      fcanvas.add(rect);
      fcanvas.renderAll();
    });
  });
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<canvas id="pdfcanvas" style="border:1px solid black"></canvas>