正在 Canvas 中加载 PDF 并绘制矩形

Question

我正在尝试构建一个网页以在 canvas 中显示 PDF 文件并允许用户绘制矩形。下面是我正在尝试的代码。问题是鼠标事件也在 canvas 之外。如何限制鼠标拖动事件只在canvas.

内

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

 //Loaded via <script> tag, create shortcut to access PDF.js exports.
 var pdfjsLib = window['pdfjs-dist/build/pdf'];

 // The workerSrc property shall be specified.
 pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

 // Asynchronous download of PDF
 var loadingTask = pdfjsLib.getDocument(url);
 loadingTask.promise.then(function(pdf) {
   console.log('PDF loaded');
   
   // Fetch the first page
   var pageNumber = 1;
   pdf.getPage(pageNumber).then(function(page) {
  console.log('Page loaded');
  
  var scale = 1.5;
  //var viewport = page.getViewport({scale: scale});
  var viewport = page.getViewport(scale);
  // Prepare canvas using PDF page dimensions
  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
  var renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  var renderTask = page.render(renderContext);
  renderTask.promise.then(function () {
    console.log('Page rendered');
  });
   });
 }, function (reason) {
   // PDF loading error
   console.error(reason);
 });


 $(function () {
  "use strict";
  var startX,
   startY,
   selectedBoxes = [],
   $selectionMarquee = $('#selectionMarquee'),
   $allCords = $('#all-cords'),
   positionBox = function ($box, coordinates) {
    $box.css(
     'top', coordinates.top
    ).css(
     'left', coordinates.left
    ).css(
     'height', coordinates.bottom - coordinates.top
    ).css(
     'width', coordinates.right - coordinates.left
    );
   },

   compareNumbers = function (a, b) {
    return a - b;
   },
   getBoxCoordinates = function (startX, startY, endX, endY) {
    var x = [startX, endX].sort(compareNumbers),
     y = [startY, endY].sort(compareNumbers);

    return {
     top: y[0],
     left: x[0],
     right: x[1],
     bottom: y[1]
    };
   },
   trackMouse = function (event) {
    var position = getBoxCoordinates(startX, startY, event.pageX, event.pageY);
    console.log(position);
    positionBox($selectionMarquee, position);
   },
   displayCoordinates = function () {
    var msg = 'Boxes so far:\n';

    selectedBoxes.forEach(function (box) {
     msg += '<li>(' + box.left + ', ' + box.top + ') - (' + (box.left + box.right) + ', ' + (box.top + box.bottom) + ')</li>';
    });
    $allCords.html(msg);
   };

   var canvas = document.getElementById('the-canvas');
  $(document).on('mousedown', function (event) {
   startX = event.pageX;
   startY = event.pageY;
   positionBox($selectionMarquee, getBoxCoordinates(startX, startY, startX, startY));
   $selectionMarquee.show();
   $(this).on('mousemove', trackMouse);
  }).on('mouseup', function (event) {
   var position,
    $selectedBox;

    $selectionMarquee.hide();

    position = getBoxCoordinates(startX, startY, event.pageX, event.pageY);

    if (position.left !== position.right && position.top !== position.bottom) {
     $selectedBox = $('<div class="selected-box"></div>');
     $selectedBox.hide();
     $('body').append($selectedBox);

     positionBox($selectedBox, position);

     $selectedBox.show();

     selectedBoxes.push(position);
     displayCoordinates();
     $(this).off('mousemove', trackMouse);
    }
  });
 });

body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
  }
  #selectionMarquee {
   z-position: 1000;
   position: absolute;
   border: 1px solid #FF0000;
  }

  .selected-box {
   z-position: 999;
   position: absolute;
   border: 1px solid #FF0000;
  }
  #all-cords {
   position: fixed;
   right: 0;
   bottom: 0;
   background: #9f9;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src=https://mozilla.github.io/pdf.js></script>
<h1>Rectangle In Canvas</h1>
 <div id="selectionMarquee" style="top: 338px; left: 88px; height: 52px; width: 197px; display: none;"></div>
 <div>
 <canvas id="the-canvas" style="border:1px  solid black" width="100%" height="100%"></canvas>
 </div>
 <ol id="all-cords"></ol>

如果您无法运行以上代码，请下载pdfjs.js和worker js并将其直接包含在html中。我正在尝试 like 这个。但我希望只在 canvas.

内绘制矩形

Answer 1

var canvas = document.getElementById('the-canvas');
        $(the-canvas).on('mousedown', function (event) {
            startX = event.pageX;

正在 Canvas 中加载 PDF 并绘制矩形

Loading PDF in Canvas and Drawing rectangles

javascript

canvas

pdf.js

drawrectangle