0

在这里，我试图在画布中绘制一个使用 PDFJS 呈现 PDF 的对象。当我尝试移动对象时，我能够绘制矩形，该对象在画布中表现得很奇怪。

我认为fabricJS和pdfJS之间没有交互。请帮我解决这个问题

这是小提琴链接https://jsfiddle.net/yesku5db/1/

加载 PDF 后，将鼠标移动到 pdf 的中心，您可以在此处看到鼠标光标的变化，一旦单击它，尝试移动对象，该对象将移动到画布的左上角。

    //pdfjs stuff
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function (pdf) {
  pdf.getPage(1).then(function (page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('pdfcanvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({canvasContext: context, viewport: viewport});
  });
});

//fabricjs stuff
var fcanvas = new fabric.Canvas("pdfcanvas", {selection: false});
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();

提前致谢

4

0 回答 0