javascript - 在 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;