在画布和绘图矩形中加载PDF

Question

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

 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中。 我想的东西像这样。 但我希望只在画布内画出矩形。

Answer 1

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