Question

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

是否有人可以澄清正在发生的事情，并建议一种纠正这种情况的方法？非常感谢！

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;
});

pdf.js和fabric.js

0 个答案: