在iFrame中显示的PDF上的绘图坐标 [英] Plot coordinates on PDF displayed in iFrame

问题描述

首先，我感谢我的请求非常雄心勃勃，但我们非常感谢任何帮助，因为我不确定最佳方式。

Firstly I appreciate my request is quite "ambitious", but any help is greatly appreciated as I'm not sure the best way to proceed.

在我的网站上（用PHP / MySQL构建）用户上传PDF后我想在页面上显示PDF内联（我假设在iFrame中）。然后我需要它们能够在PDF上拖出一些盒子（我假设使用jQuery）。然后，我需要记录此框的坐标，以便稍后我可以重新创建PDF，将新文本注入已定义的框。

On my site (built with PHP/MySQL) after a user has uploaded a PDF I would like to display the PDF inline on the page (I'm assuming in an iFrame). I then need them to be able to drag out a number of "boxes" on top of the PDF (I'm assuming with jQuery). I then need to record the co-ordinates of this box so then later I can re-create the PDF injecting new text into the defined "boxes".

这听起来是否合理可行？如果没有，你会建议什么？ （请不要说imagemagick！）

Does this sound feasible? If not what else would you suggest? (please don't say imagemagick!)

我知道如何重新创建注入新文本的PDF，但我的问题是如何让用户记录这些坐标。

I know how to recreate a PDF injecting new text, but my issue is with how to allow the user to record those coordinates.

推荐答案

你可以使用 PDF.js 在页面上呈现PDF。 PDF.js会将其显示为页面的一部分，因此您可以附加事件并以Acrobat插件显示的方式进行交互。

You could use PDF.js to render the PDF on the page. PDF.js will display it as part of the page so you can attach events and interact with it in ways you could not if it was being displayed by the Acrobat plugin.

我找不到一个预先存在的库来获取坐标，所以我掀起了这段代码来实现它。

I couldn't find a preexisting library for getting the coordinates so I whipped up this code to implement it.

选择代码的现场演示

$(function () {
    "use strict";
    var startX,
        startY,
        selectedBoxes = [],
        $selectionMarquee = $('#selectionMarquee'),
        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);
            positionBox($selectionMarquee, position);
        };


    $(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);

                $(this).off('mousemove', trackMouse);
            }
    });
});

一旦显示，你将不得不调整它以获得相对于PDF的坐标，但是这应该让你走上正确的轨道。

You will have to tweak it to get coordinates that are relative to the PDF once you display it, but this should get you on the right track.

这篇关于在iFrame中显示的PDF上的绘图坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！