3

我正在尝试在 PDF 的图像上绘制一个网格，因此我正在使用 pdf.js 示例。我已经编写了一些代码，可以在 fabric.js 中可靠地生成一个网格，所以在第一个实例中，我将它添加到 pdf.js 最小示例中，看看会发生什么。现在，它仍然绘制网格，但网格既不是从 mousedown 的位置开始，也不是随着光标拖动。我把我的代码放在下面，我已经尝试了画布对象初始化位置选项的一些排列和对比例值的更改。

有没有人可以澄清发生了什么，并提出纠正这种情况的方法？非常感谢！

var url = 'http://cdn.mozilla.net/pdfjs/helloworld.pdf';
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
  pdf.getPage(1).then(function getPageHelloWorld(page) {
    var scale = 1;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    //
    page.render({canvasContext: context, viewport: viewport});
  });
});

canvas = new fabric.Canvas('the-canvas', { selection: false });


var line, isDown;

var larr = [];
var dims = [5,8];
var points = [];
var offx=[];
var offy=[];
canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  for (var ij=0;ij<dims[0]+dims[1];ij++){
  larr[ij] = new fabric.Line(points, {
    strokeWidth: 1,
    fill: 'black',
    stroke: 'black',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(larr[ij]);
  }
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  for(var i=0; i<dims[0]; i++) {
      offy[i] = points[1] + i/(dims[0]-1)*(pointer.y-points[1]);
  }
  for(var j=0; j<dims[1]; j++) {
      offx[j] = points[0] + j/(dims[1]-1)*(pointer.x-points[0]);
  }
  for (var i=0;i<dims[0];i++) {
    larr[i].set({ x2: pointer.x, y1: offy[i],y2: offy[i] });
  }
  for (var j=0;j<dims[1];j++) {
    larr[dims[0]+j].set({ x1: offx[j], x2: offx[j], y2: pointer.y });
  }
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});
4

0 回答 0