Loading PDF in Canvas and Drawing rectangles

僤鯓⒐⒋嵵緔 提交于 2020-04-30 10:05:14

问题


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>

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.


回答1:


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


来源:https://stackoverflow.com/questions/56604778/loading-pdf-in-canvas-and-drawing-rectangles

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!