не в состоянии нарисовать прямоугольник на существующем <canvas> которое делало PDF с помощью pdfjs

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 = 'https://cdn.mozilla.net/pdfjs/helloworld.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>