无法在使用 pdfjs 呈现 PDF 的现有 <canvas> 上绘制矩形答案

【问题标题】：not able to draw rect on existing <canvas> which rendered PDF using pdfjs无法在使用 pdfjs 呈现 PDF 的现有 <canvas> 上绘制矩形
【发布时间】：2017-04-01 19:47:18
【问题描述】：

任务

在您的页面中有一个画布 <canvas id="pdfCanvas"> 为现有画布创建织物画布 new fabric.Canvas("pdfCanvas"); 有 mouse.down、mouse.up、mouse.move 方法来启用绘制矩形使用 PDF.js 在上述画布“pdfCanvas”中渲染 pdf 浏览器现在显示渲染的 PDF 现在在 pdf 上绘制矩形，它隐藏了渲染的画布，但它确实绘制了对象

问题

这是查看问题的关键： - 运行上述https://jsfiddle.net/hiitskiran/wgz8qore/2/ - 你可以看到织物矩形隐藏在渲染的 pdf 后面 - 单击 pdf 画布区域以查看织物对象

【问题讨论】：

标签： javascript fabricjs pdfjs

【解决方案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>

【讨论】：

非常感谢@Inferon，我实际上尝试使用相同的 setbackgroundImage，但我错过了关键的事情，我没有意识到 page.render() 是一个承诺，所以我在页面之后立即有了我的代码.render() 所以因为它是一个异步调用它不适合我。这是唯一的方法吗，每次呈现新页面时都将其设置为背景图像？很高兴我设置了一个小提琴，否则很难解释这个问题。
我认为这是唯一的方法，但如果你能从你的 pdf.js 中获得一个 svg，那应该是另一回事了，最好尊重
当我在 github asturur 中提出问题时，回答如下：我想有一个单独的画布用于织物来显示您想要显示的内容，覆盖在 pdfjs 画布上，保存绘制操作，重新绘制每次在织物画布上做某事时的背景 ( pdfpage )。对于此类问题，请打开 stackoverlow 问题，以防直接 ping 我，但这不是我们可以在此处跟踪的问题。我们如何在画布上覆盖画布？我没有找到如何做到这一点的示例，当我有 2 个画布时，一个用于 pdfjs 渲染，另一个用于我无法绘制的织物 js
如何使用适合页面和适合宽度的 2 个按钮动态更改视图的大小？假设如果我在找到缩放因子后进行更改，那么画布内的织物对象的大小呢？如何缩放这些对象？
@InferOn stackoverflow.com/questions/49608971/… 你能帮我解决这个问题吗