在Canvas和工程图矩形中加载PDF [英] Loading PDF in Canvas and Drawing rectangles

问题描述

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

I am trying to build a web page to display a PDF file inside canvas and allow user to draw rectangles. Below is the code I'm trying. The problem is mouse event is going outside canvas also. How to restrict mouse dragging event only inside the 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中.我正在尝试之类的这个.但我希望仅在画布内部绘制矩形.

If you are not able to run the above code download pdfjs.js and worker js and include it directly in html. I'm trying something like this. But I want the rectangles to be drawn only inside the canvas.

推荐答案

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

这篇关于在Canvas和工程图矩形中加载PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！