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

Question

任务

在页面中有一个画布<canvas id="pdfCanvas">为现有的canvas new fabric.Canvas("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>